Lucfia Lucfia - 3 months ago 15
CSS Question

Overflow not for every element

is there a way to make

overflow:hidden
which wouldn't be applied for every child?

Little example:

<div class="parent" style="overflow:hidden; position: relative;">
...
<div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
<div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
...
</div>


I need to have 1 element, which will be visible even if it is overflowing.

Answer

If your visible element can be position: absolute it will ignore the overflow: hidden of its parent. Here's a snippet example.

Please notice your parent should be contained inside another div with position: relative to properly work.

.visible{
  position: absolute;
}
.parent{
  overflow: hidden;
}
.relative{
  position: relative;
}

/* presentational styles */
.parent{
  border: 1px solid blue;
}
.hidden{
  background: yellow;
}
.visible{
  background: red;
}
.parent,
.hidden,
.visible{
  padding: 2rem;
}
<div class="relative">
  <div class="parent">
     <div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
     <div class="visible" style="bottom: -50px"> BB </div> <!-- overflowed and visible -->
  </div>
</div>