CSS：如何在一个位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上
Posted
技术标签:
【中文标题】CSS：如何在一个位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上【英文标题】：CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container 【发布时间】：2011-01-15 15:22:37 【问题描述】：我有 3 个级别的div：
div 和 overflow: hidden。这是因为如果框内的某些内容（此处未显示）超出框的大小，我希望将其裁剪。
（下面的红色部分） 在这里面，我有div 和position: relative。这样做的唯一用途是用于下一个级别。
（在下面的蓝色部分） 最后一个 div 我使用 position: absolute 从流程中取出，但我希望相对于红色的 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>【问题讨论】：
澄清：所以您希望蓝色框（最里面的 div）能够溢出绿色框（最外面的 div），但让溢出隐藏在绿色框上？所以基本上，除了蓝框外，绿框里的所有东西都隐藏了溢出，对吗？ 安东尼，是的，就是这样。而且我不关心红色框（#2）会发生什么，它只是在那里影响蓝色框（#3）的顶部/右侧。 +1 用于正确解释一个我认为很难解释但真的想要答案的问题。position: fixed 将忽略任何包含元素的overflow:hidden。
【参考方案1】：
一个有效的技巧是使用position: absolute 而不是position: relative 定位框#2。当我们想要一个带有position: absolute 的内盒（这里是盒#3）相对于外盒定位时，我们通常在外盒（这里是盒#2）上放置一个position: relative。但请记住：要相对于框 #2 定位框 #3，只需定位框 #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>
【讨论】：
我实际上使用了position: static，这对我来说效果更好
@Jason，很有趣；所以你是说你在框#2 上使用position: static 而不是position: absolute。
你能详细说明为什么absolute 不剪辑而relative 剪辑吗？
除非您将 #1 和 #3 之间的所有内容都设置为绝对值，否则此解决方案将不起作用。实际上，这是不可能的。
想知道用这样的颜色来解释如此视觉化的东西的目的是什么......【参考方案2】：
在溢出隐藏容器之外显示内容没有神奇的解决方案。
通过将绝对定位的 div 放置在当前的相对容器内（您不想剪辑的 div 应该在此 div 之外），可以实现类似的效果：
#1 .mask
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
请记住，如果您只需要在 x 轴上剪辑内容（这似乎是您的情况，因为您只设置了 div 的宽度），您可以使用overflow-x: hidden。
【讨论】：
【参考方案3】：我真的没有办法按原样执行此操作。我认为您可能需要从 div#1 中删除 overflow:hidden 并在 div#1 中添加另一个 div（即作为 div#2 的兄弟）来保存您未指定的“内容”并将overflow:hidden 添加到其中。我不认为溢出可以（或应该能够）被覆盖。
【讨论】：
【参考方案4】：如果外部 div（绿色框）内没有显示其他内容，为什么不将该内容包裹在另一个 div 中，我们称之为"content"。在这个新的内部 div 上隐藏了溢出，但在绿色框上保持溢出可见。
唯一的问题是，您将不得不四处乱窜，以确保内容 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>
【讨论】：
以上是关于CSS：如何在一个位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上的主要内容，如果未能解决你的问题，请参考以下文章
CSS DIV绝对定位 后 页面的大小改变 div层位置如何保持不变