Position absolute and overflow hidden
We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then 开发者_如何学编程the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV (example).
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)? Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD (exmple).
Are there any other options?
Make outer <div>
to position: relative
and inner <div>
to position: absolute
. It should work for you.
What about position: relative
for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative
parent, or the nearest found relative parent. So the element with overflow: hidden
should be between relative
and absolute
positioned elements:
<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;
}
Make sure.
- parent position relative.
- parent have manually assigned width and height(important as child element having absolute position).
- 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>
}
You just make div
s like this:
<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>
I hope this code will help you :)
精彩评论