位置绝对和溢出隐藏

我们有两个潜水艇，一个嵌在另一个里面。如果外部 DIV 没有定位为绝对值，那么定位为绝对值的内部 DIV 不服从隐藏在外部 DIV (例子)中的溢出。

是否有任何机会使内部 DIV 服从外部 DIV 的溢出隐藏，而不将外部 DIV 设置为绝对位置(因为这将混淆我们的完整布局) ？另外，相对于我们的内部 DIV 位置不是一个选项，因为我们需要“长出”一个表 TD (例子)。

还有别的选择吗？

219560 次浏览

小开

外部 div 的 position: relative呢？在隐藏内部的示例中。它也不会移动它的布局，因为你没有指定一个顶部或左侧。

小开

最佳答案

使外 <div>到 position: relative和内 <div>到 position: absolute。它应该为你工作。

小开

你只需要像这样做 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>

我希望这个代码可以帮助您:)

小开

绝对定位的元素实际上定位在 relative父元素或最近的找到的相对父元素上。所以 overflow: hidden元素应该在 relative和 absolute元素之间定位:

<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;
}

小开

确认一下。

父母职位相对关系。
父元素手动分配宽度和高度(对于具有绝对位置的子元素很重要)。
子位绝对;

.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}


.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

}