How to ignore parent element's overflow:hidden in css

user_27305 0
Viewed 89704

I have a div element wrapping other div elements like so:

<div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.

What is the best way to achieve this?

overflow css
4 Answers

The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.

.outer-container {
  position: relative;
  height: 50px;
}

.container {
  background: gray;
  overflow: hidden;
  height: 50px;
}

#a,
#b {
  height: 100px;
  width: 100%;
}

#a {
  background: green;
  position: absolute;
  top: 60px;
}

#b {
  background: red;
  font-size: 60px;
}
<div class="outer-container">
  <div class="container">
    <div id="a"></div>
    <div id="b">Cut off</div>
  </div>
</div>

user_96401770
Related