CSS: 如何在一个位置内部设置位置: 绝对 div: 相对 div 不会被溢出裁剪: 隐藏在容器中

我有三种 div水平:

  • (下图绿色部分) A top level div with overflow: hidden。这是因为我想要一些内容(没有显示在这里)在该框裁剪，如果它超过了框的大小。
  • (下面的红色部分) 在这里面，我有 div和 position: relative。这个的唯一用途是用于下一个级别。
  • (下面的蓝色部分) 最后，我用 position: absolute从流中取出了一个 div，但是我希望它的位置相对于红色的 div(而不是页面)。

我希望把蓝色的盒子从流中拿出来，扩展到绿色的盒子之外，但是要相对于红色的盒子定位，比如:

然而，通过下面的代码，我得到:

除去红色方框上的 position: relative，现在蓝色方框被允许离开绿色方框，但是相对于红色方框不再定位:

有没有办法:

  • 把 overflow: hidden放在绿色的盒子上。
  • 蓝色方框是否扩展到绿色方框之外，并相对于红色方框定位？

完整来源:

#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}


#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}


#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}
<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>

121109 次浏览
小开

我不知道该怎么办。我认为您可能需要从 div # 1中删除 overflow:hidden，并在 div # 1中添加另一个 div (即作为 div # 2的兄弟节点) ，以保存未指定的“内容”，并将 overflow:hidden添加到该节点中。我不认为溢出可以(或应该能够)被覆盖。

小开

在溢出的隐藏容器之外显示东西是没有神奇的解决方案的。

类似的效果也可以通过在当前相对容器中定位一个绝对位置的 div 来匹配其父容器的大小来实现(你不想剪切的 div 应该在这个 div 之外) :

#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}

请记住，如果只需要剪辑 x 轴上的内容(这似乎是您的情况，因为您只设置了 div 的宽度) ，则可以使用 overflow-x: hidden。

小开

如果在外部 div (绿色框)中没有显示其他内容，为什么不将该内容包装在另一个 div 中，我们称之为 "content"。将溢出隐藏在这个新的内部 div 上，但在绿色框中保持溢出可见。

唯一的问题是，您必须确保 content div 不会干扰红色框的定位，但是看起来您应该能够轻松地解决这个问题。

<div id="1" background: #efe; padding: 5px; width: 125px">
<div id="content" style="overflow: hidden;">
</div>
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>
小开
最佳答案

一个有效的技巧是用 position: absolute而不是 position: relative来定位框 # 2。我们通常把 position: relative放在一个外盒子上(这里的框 # 2) ，当我们想要一个内盒子(这里的框 # 3)与 position: absolute相对于外盒子的位置。但是请记住: 对于盒子 # 3要定位相对于盒子 # 2，盒子 # 2只需要定位。通过这种改变，我们得到:

下面是修改后的完整代码:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">


/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }


/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }


</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>


提交答案