CSS：如何在一个位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上答案

【问题标题】：CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a containerCSS：如何在一个位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上
【发布时间】：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。

标签： css overflow css-position

【解决方案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>

【讨论】：