CSS：如何将position：absolute div放在一个position：relative div内，而不会被溢出：隐藏在容器中

143

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

展开摘要

css overflow css-position

— 阿弗网
source

44

+1格式正确的问题和源代码

— graphicdivine'Feb11

澄清：因此，您希望蓝色框（最里面的div）能够从绿色框（最外面的div）溢出，但将溢出隐藏在绿色框上吗？因此，基本上，除了蓝色框以外，绿色框中的所有内容都隐藏了溢出，对吗？

— 安东尼2010年

安东尼，是的，就是这样。而且我也不关心红色框（＃2）发生了什么，它只是影响蓝色框（＃3）的顶部/右侧。

— avernet

2

+1可以正确解释一个我认为很难解释但确实想要得到答案的问题。

— Andrew Mao

position: fixed将忽略overflow:hidden任何包含元素的。

— 凯文·比尔

48

一种有效的技巧是将框＃2 position: absolute放置为而不是position: relative。position: relative当我们希望将一个内盒（此处为盒3）position: absolute相对于外盒放置时，通常会在外盒（此处为盒2）上放置一个。但是请记住：要使框＃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>

— 阿弗网
source

5

我实际上使用过，position: static并且对我来说效果更好

— Jason 2010年

@Jason，非常有趣；因此，您是说position: static在＃2框上使用而不是position: absolute。

— avernet 2010年

1

您能详细说明为什么absolute不剪裁但剪裁relative吗？

— Andrew Mao

1

除非您将＃1和＃3之间的所有内容都设为绝对值，否则此解决方案将不起作用。实际上，这是不可能的。

— windmaomao

1

想知道用这样的颜色来解释视觉的目的是什么...

— ed1nh0

5

在溢出的隐藏容器之外显示内容没有任何神奇的解决方案。

通过将绝对定位的div与其父对象的大小匹配，可以将其放置在当前相对容器内（您不希望裁剪的div应该在此div之外）来实现类似的效果：

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

请注意，如果您只需要在x轴上裁剪内容（这似乎是您的情况，因为您只设置了div的宽度），则可以使用overflow-x: hidden。

— 钳住
source

0

我真的没有一种方法可以照常进行。我认为您可能需要overflow:hidden从div＃1中删除，并在div＃1中添加另一个div（即作为div＃2的同级对象）来保存未指定的“内容”，然后将其添加overflow:hidden到其中。我认为溢出不会（或应该能够）被覆盖。

— 图形神
source

0

如果在外部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>

— 安东尼
source