CSS溢出隐藏在绝对位置

Question

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>

Run Code Online (Sandbox Code Playgroud)

所以,我希望徽标的右边缘不显示.想法？

Answer 1

Bri*_*kau 89

尝试添加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>

Run Code Online (Sandbox Code Playgroud)

在JS Bin上看到它

如果图像被假设为"在div中移动",为什么你想要它相对于页面？也许我错过了什么. (6认同)
但是它不再相对于页面定位了. (2认同)

Answer 2

Bro*_*ams 22

由于图像的容器绝对定位,因此它位于"包含"div的流动之外.

您可以选择相对定位或使用jQuery动态调整绝对定位div的尺寸.

这是不正确的.添加溢出:隐藏; 到你的父容器将使其中的绝对定位元素不显示在外面. (5认同)
@BrockAdams 虽然他没有回复评论，但他在评论一个答案。 (3认同)

归档时间：	15 年，7 月前
查看次数：	61378 次
最近记录：	8 年，4 月前