Question

我一直在敲打这个。我想绝对定位一个我将在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>

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

Answer 1

尝试将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
上查看

Answer 2

由于图像的容器绝对定位，因此它位于“包含”div的流程之外。

您可以选择相对位置，也可以使用jQuery动态调整绝对定位div的尺寸。

Answer 3

将位置绝对移动到图像，然后将相对位置添加到父容器。在类似的情况下为我工作。

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

CSS溢出隐藏在绝对位置

3 个答案: