Sometimes, we want to fix overflow hidden not working in an absolute position element with CSS.
In this article, we’ll look at how to fix overflow hidden not working in an absolute position element with CSS.
How to fix overflow hidden not working in an absolute position element with CSS?
To fix overflow hidden not working in an absolute position element with CSS, we set overflow
to hidden
in a relative position element.
For instance, we write
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
to add some elements.
Then we write
.relative-parent {
position: relative;
}
.hiding-parent {
overflow: hidden;
}
.child {
position: absolute;
}
to put the div with hiding-parent
inside the div with relative-parent
to apply the hidden overflow effect.
Conclusion
To fix overflow hidden not working in an absolute position element with CSS, we set overflow
to hidden
in a relative position element.