隐藏着绝对位置的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溢出

回答

相关问题