Understanding postion:absolute

Question

The following is from this question's top answer

Absolute CSS Positioning

position: absolute;

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.

Now see the following code:

<div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">
          <span class="glyphicon glyphicon-circle-arrow-left"></span>
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </div>
      </div>

if I make: span{ position: absolute;} it results in following:

See the position of arrows, they are positioned with respect to div.panel-heading or div.panel-primary but not with respect to div.panel-body (which happens to be its immediate parent). I can't understand why?

Answer 1

To quote w3.org CSS2 spec section 9.8.4:

The containing block for a positioned box is established by the nearest positioned ancestor

"nearest positioned ancestor" is any parent element that is non-static (the default value of position)

Edit:

Further reading on MDN, MDN is an excellent resource for understanding CSS specifications, they use plainer language than the official specs.

Answer 2

absolute : This removes the element, including any child elements, completely from the flow of the document, and positions it at the specified offsets. If the element is nested inside another positioned element, the offsets are calculated with reference to the positioned parent. Otherwise, the offsets are calculated with reference to the page.

set position: relative on parent and see result.