隱藏着絕對位置的CSS溢出

我一直在抨擊這一塊。我想絕對定位一個圖像，我將在div中移動，並想要在div外延伸的任何東西被剪裁。這裏是一個問題的例子：隱藏着絕對位置的CSS溢出

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

所以，我想標誌的右邊緣不顯示。想法？

來源

2010-07-11 David A

由於圖像的容器絕對定位，它是「包含」 div的流動的外部。

你的選擇是要麼相對定位，要麼用jQuery動態調整絕對定位div的尺寸。

來源

2010-07-12 00:13:11

好的，我很害怕這個。謝謝！ – 2010-07-12 00:29:40

嗯那麼這個例子呢'

'有什麼理由讓內部div不要隱藏。在Safari中遇到Windows和Opera的這種行爲 – Olga 2012-05-03 12:11:02

這是不正確的。添加溢出：隱藏;到你的父容器將使它內部絕對定位的元素不顯示在外面。 – 2012-10-27 17:09:25

嘗試將position: relative添加到您的外部div。這將定位圖像相對於該div（遵守溢出風格），而不是相對於頁面。

實施例：

<html> 
<body> 
    <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

查看它JS Bin

來源

2010-07-12 00:10:53

但是，它不是相對於頁面的位置了。 – 2010-07-12 00:30:05

如果圖像是假設「在div中移動」，爲什麼你會希望它相對於頁面？也許我錯過了一些東西。 – 2010-07-12 00:46:24

謝謝你救了我的一天:) – user2972061 2017-07-04 06:52:10

將絕對位置移動到圖像，然後將相對位置添加到父容器。在類似的情況下爲我工作。

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

來源

2014-02-06 04:22:31 christoshrousis

隱藏着絕對位置的CSS溢出

回答

相關問題