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.

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.

To fix overflow hidden not working in an absolute position element with CSS, we set overflow to hidden in a relative position element.