Question

我有3级div：

（绿色如下）顶级div overflow: hidden。这是因为如果超过盒子的大小，我希望在该盒子内部播放一些内容（此处未显示）。
（以下红色）在此内部，我div与position: relative。唯一用途就是下一个级别。
（下面的蓝色）最后一个div我用position: absolute取出流量，但我希望相对于红色div定位（不是到页面）。

我希望将蓝色框从流程中取出并扩展到绿色框之外，但是相对于红色框定位，如：

但是，通过以下代码，我得到：

然后移除红色框上的position: relative，现在蓝色框可以离开绿色框，但相对于红色框不再定位：

有办法：

将overflow: hidden保留在绿色框中。
蓝色框是否扩展到绿色框之外并相对于红色框定位？

完整的源代码，为了测试而使用内联CSS：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <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>
    </body>
</html>

Answer 1

一个有效的技巧是将{2}框放在position: absolute而不是position: relative。当我们想要一个带有position: relative的内框（此处为＃3}}相对于外框定位时，我们通常会在外框（此处为框＃2）上放置一个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>

我在Absolutely positioned box inside a box with overflow: auto or hidden上添加了有关此内容的详细信息。

Answer 2

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

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

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

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

Answer 3

我真的没有办法按原样这样做。我想你可能需要从div＃1中删除overflow:hidden并在div＃1中添加另一个div（即作为div＃2的兄弟）来保存未指定的'内容'并添加overflow:hidden相反。我不认为溢出可以（或应该能够）过度使用。

Answer 4

如果在outer-div（绿色框）中没有显示其他内容，为什么不将该内容包含在另一个div中，让我们称之为"content"。在这个新的内部div上隐藏了溢出，但是在绿色框上可以看到溢出。

唯一的问题是，你必须弄清楚，以确保内容div不会干扰红色框的位置，但听起来你应该能够解决这个问题。 / p>

<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不会被溢出裁剪：隐藏在容器上

4 个答案: