Question

I have something like this:

<div id="page">
  <---some content here -->
  <div id="container">
    <div id="child">
    </div>
  </div>
</div>

now, #page does not have any formatting in it. It works correctly for some content, i mean, when content is bigger, the #page has more height also. But, when today i applied #container in it, which is positioned absolute, and within it there is a #child which is positioned relative, it seems like #container is not within #page – that means if #container grows, height of #page is not changing, why?

Answer 1

Absolutely positioned elements are removed from the normal flow of the document causing them not to increase the height of their parent if their height increases.

Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. Full Text