如何允许绝对定位的元素违反其祖先overflow: hidden
并在其外部进行渲染?由于position: relative
祖先层次结构中的元素之间存在一个元素,因此情况变得复杂。
这是一支笔。在这种情况下,如何允许红色的内部div以其全高(300px)呈现,而不是受最外层父级的150px限制。我无法overflow: hidden
从元素中删除-我正在使用它来实现折叠面板。我也不能移动position: relative
到一个最外层元素的父母-它必须留在外部元素。
使用以下规则overflow:hidden
从中删除并在.outermost
其中创建另一个元素:overflow:hidden; height:100%; width:100%; position:absolute; top:0; left:0;
并将其他所有内容放入其中,它们不会溢出。
.outermost {
width: 400px;
height: 150px;
background-color: blue;
position:relative;
}
.outer {
position: relative;
}
.inner {
position: absolute;
left: 100px;
height: 300px;
width: 50px;
background-color: red;
z-index: 1;
}
.hideOverflow{ /* Put all the content here that's overflowing content you want hidden. And leave content you don't want to hide outside this. */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
<div class="outermost">
<div class="outer">
<div class="inner">
</div>
</div>
<div class="hideOverflow">
<p>Overflowing content inside this element will be hidden.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis imperdiet nisl, sit amet pretium eros rhoncus nec. Vestibulum viverra semper libero, nec commodo felis lobortis vel. Nam eu erat vel neque viverra iaculis. Mauris condimentum consectetur sem vitae semper. Duis bibendum mollis ex, vitae egestas velit. Nam vitae dolor ornare, vestibulum dui et, sollicitudin est. Duis tristique vehicula dolor et condimentum. Maecenas in tristique dolor. Mauris luctus tincidunt sem. Nulla sit amet tincidunt quam. Aenean quis semper enim. Morbi dolor tellus, porta eu feugiat non, pellentesque ac lacus. Nulla facilisi. Mauris suscipit aliquet egestas.</p>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句