CODEWITHSUNDEEP
htmlcssdomcss-position
craigmichaelmartin
craigmichaelmartin

Reputation: 6489

absolute position not outside document flow if in overflow auto parent

Why does a position:absolute element affect the document flow when it's parent is position:relative inside a parent which is overflow:auto? (Example below)

This seems to run counter to expected behavior:

The element is removed from the normal document flow; no space is created for the element in the page layout" MDN.

div.a should always only be 100px tall, and never need vertical scrolling, since it has only one line of text and it's child (div.b) has a height of 0. This indeed is the case, and we can see div.c's positioning outside the normal document flow.

However, if overflow:auto is applied to div.a (like the example below), div.a accommodates div.c's height (a height on a position absolute element which is not supposed to be in the normal document flow) by supplying a scroll bar. Why? div.b still has a height of 0, and div.c shows no green background through the transparency.

.a {
  height: 100px;
  overflow: auto;  /* TOGGLE THIS LINE */
  background-color: pink;
}

.b {
  position: relative;
  background-color: green;
}

.c {
  position: absolute;
  background-color: rgba(255, 255, 255, .5);
  height: 500px;
  top: 0;
}
<div class="a">
  I should only be 100px tall
  <div class="b">
    <div class="c">
      I am position absolute with a height of 500px
    </div>
  </div>
</div>

View on JSFiddle

Upvotes: 4

Views: 1007

Answers (1)

Fisnik Tahiri
Fisnik Tahiri

Reputation: 406

The absolute-positioned element will be pulled out of the document flow BUT browser will always make it possible for you to access the element by providing scrollbars UNLESS there are "overflow:hidden"-s applied to wrappers

To clear it up a bit: Even the overflown content will be considered as a part of the document by the Browser and it will expand the margins of the view so it includes all the elements inside the view. The default value of overflow is set to visible.

Upvotes: 2

Related Questions