html – 用绝对位置隐藏的CSS溢出

我一直在敲我的头在这一个。我想要绝对位置一个图像,我将在一个div中移动,并希望任何延伸到div外面被剪辑。这里是一个问题的例子:

<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>

所以,我想要的徽标的右边缘不显示。想法?

因为图像的容器是绝对定位的,它在“包含”div的流的外部。

你的选择是相对定位,或者用jQuery动态地调整绝对定位的div的尺寸。

http://stackoverflow.com/questions/3225102/css-overflow-hidden-with-absolute-position

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 用绝对位置隐藏的CSS溢出