CSS绝对定位中的溢出隐藏问题

Question

CSS绝对定位中的溢出隐藏问题

58

我想将一个图像绝对定位到一个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>

我想让logo的右边缘不显示，有什么办法吗？

- David A

3个回答

24

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

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

- Brock Adams

好的，我就担心会出现这种情况。谢谢！ - David A

嗯，这个例子有什么问题吗？

<div style="width: 120px; height: 600px; overflow: hidden; position:absolute; left: Npx; top: Mpx;"><div style="position: relative; width: 120px; height: 600px; top: 0px; left: -120px;"></div></div>

里面的 div 没有被隐藏，这是有什么原因吗？我在Windows上的Safari和Opera中遇到了这种情况。 - Olga

8

这不正确。在父容器中添加overflow:hidden;将使其内部的绝对定位元素不会显示在外部。 - Martin Andersson

1

@MartinAndersson，回复评论时，请使用@用户名称地址。这既可以澄清您所指的内容，又可以提醒指定的用户。请参见此处的“在评论中回复”（http://stackoverflow.com/editing-help#comment-formatting）。 - Brock Adams

4

他并不是在回复评论，而是在对一个答案发表评论。 - jazzpi

2

将绝对定位应用于图像，然后将相对定位添加到父容器。在类似情况下对我有效。

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

- Christos Hrousis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Moeskau · Accepted Answer

尝试在外部div中添加position: relative。这将使图像相对于该div定位（遵守overflow样式），而不是相对于页面定位。

示例：

<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 上查看