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?

The actual reason is that the icons' positions **are being overridden** by bootstrap, so your question is based on a false premise. — Alohci, Jun 11 '17 at 16:51

cfreear · Accepted Answer · 2017-06-11T11:06:37.957

2

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.

edited Jun 11 '17 at 11:06

answered Jun 11 '17 at 08:42

cfreear

1,855
2
19
25

Thank you so much for not beating around the bush and exactly answering the question. – dasfdsa Jun 11 '17 at 08:51
Can you explain how the positioning happens after position: absolute is set? My understanding is that it will be placed at the same location where it was before position: absolute. Is it correct? – dasfdsa Jun 11 '17 at 09:10
No, ``position:absolute`` will always change the position based on the nearest non-static ancestor. ``position:relative`` will place the element in the same place then ``top``, ``right``, ``bottom`` and ``left`` will offset it from this location (leaving whitespace where the element was) – cfreear Jun 11 '17 at 11:05

score 1 · Answer 2 · answered Jun 11 '17 at 08:39

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.

score 0 · Answer 3 · answered Jun 11 '17 at 08:45

Try to avoid absolute positioning when you can. The layout you probably need can be achieved easily with a flexbox.

.panel-body {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-body">
  <span class="glyphicon glyphicon-circle-arrow-left"></span>
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <span class="glyphicon glyphicon-circle-arrow-right"></span>
</div>

You are right. Thank you, it's very useful for me since I am learning CSS these days — dasfdsa, Jun 11 '17 at 09:26

Understanding postion:absolute

3 Answers3