Why is position absolute rendered above position static?

J

5

17

I have a simple absolute div and another normal div coming behind. Why is the absolute div rendered above the other?

I know that I can fix it with z-index - But what is the reason?

<style>
    .with-absolute {
      position:absolute;
      top:0px;
      bottom:0px;
      background-color:red
    }
    .other {
      background-color:yellow;
    }
  </style>
   </head>
<body>
  <div class="with-absolute">Hello</div>
  <div class="other">Why is this not on top? It comes last</div>
</body>

Jazzy answered 4/5, 2015 at 10:11 Comment(0)

L

2

Absolute:

This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow.

Here is example code:

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO from author Noah Stokes's document.

Clearly here is the Noah Stokes's DOCUMENT about css positioning

Lustihood answered 4/5, 2015 at 10:15 Comment(1)

Please see stackoverflow.com/help/referencing for help on quoting external sources. – Bunion 4/5, 2015 at 10:18

A

11

The paint order of elements is determined by CSS 2.1 spec, E.2 Painting order

Static positioned elements are painted in steps 4 to 7. Absolute positioned elements with a z-index of auto or 0 are painted in step 8, so are always on top.

Avocet answered 4/5, 2015 at 10:34 Comment(4)

Thanks for actually answering this question. While the other answers seem to provide correct information, I don't see how they relate to the question – Epithelium 4/5, 2015 at 16:43

@Epithelium The original question asked for a reason. This answer says "just because!" – Urien 4/5, 2015 at 17:46

This is the only answer of the question. – Undersized 22/7, 2015 at 2:54

@Epithelium I know it's too late (just discovered this one) but at least two other answers are giving wrong information but unfortunately upvoted. z-index default value was never 0 nor 1. – Halcomb 17/11, 2018 at 21:20

F

4

absolute The element is positioned relative to its first positioned (not static) ancestor element

Reference.

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

Reference.

Fishmonger answered 4/5, 2015 at 10:12 Comment(0)

D

4

Generally default value for z-index of absolute elements is 0 which is located above static position . If you want to move it behind set the z-index to -1.

Distal answered 4/5, 2015 at 10:14 Comment(1)

Wow, since when?? I have been programming css for 15 years now and never had to play with z-indexes. Absolute elements were showing according the DOM flow. If I had two div children, the first one absolute, the second one would be on top. – Heeley 4/5, 2016 at 17:7

L

2

Absolute:

This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow.

Here is example code:

#box_1 { 
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #ee3e64;
}
#box_2 { 
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #44accf;
}

DEMO from author Noah Stokes's document.

Clearly here is the Noah Stokes's DOCUMENT about css positioning

Lustihood answered 4/5, 2015 at 10:15 Comment(1)

Please see stackoverflow.com/help/referencing for help on quoting external sources. – Bunion 4/5, 2015 at 10:18

A

2

All static elements have a default z-index (auto), meaning, zero.

Only logic explanation that I have is that when you add position: relative|absolute|fixed to an element, you place it outside the document flow, and therefor becomes a z-index of 1.

Alis answered 4/5, 2015 at 10:15 Comment(0)

Recommended topics

Hot tags