CODEWITHSUNDEEP
htmlcsscss-position
zolv
zolv

Reputation: 1902

Why is position absolute rendered above position static?

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?

JSBIN: http://jsbin.com/yadoxiwuho/1

<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>

Upvotes: 17

Views: 3713

Answers (5)

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 12

pcs
pcs

Reputation: 1854

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

Upvotes: 2

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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.

Upvotes: 2

Sam
Sam

Reputation: 1559

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.

Upvotes: 4

odedta
odedta

Reputation: 2478

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.

Upvotes: 4

Related Questions