位置绝对和溢出隐藏


134

我们有两个DIV,一个嵌入另一个。如果外部DIV的位置不是绝对的,则内部DIV的位置绝对不遵循外部DIV的隐藏溢出(示例)。

是否有机会使内部DIV服从外部DIV的隐藏溢出,而无需将外部DIV设置为绝对位置(因为这会破坏我们的完整布局)?相对于内部DIV的相对位置也不是一种选择,因为我们需要“增长”到表TD(exmple)。

还有其他选择吗?

Answers:


282

制作外<div>,以position: relative和内<div>position: absolute。它应该为您工作。


5
谢谢你们俩 我一直以为position:relative是默认设置。我刚刚了解到static是默认设置。我接受shankhans的答案,因为两个答案都相等,并且shankhan需要更多积分;-)
Zardoz 2011年

7
一些说明和/或文档将是一个很好的补充。
showdev 2015年

25

怎么样position: relative的外层div?在示例中,隐藏了内部。由于您未指定顶部或左侧,因此它也不会在布局中移动。


9

实际上relative,相对于父级或最近找到的相对父级定位绝对定位的元素。因此,具有的元素overflow: hidden应位于relativeabsolute元素之间:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

-3

您只需要div像这样:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

我希望这段代码对您有帮助:)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.