How to fix overflow hidden not working in an absolute position element with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *