Why absolutely positioned elements render over previous absolutely positioned element?

Question

In this code,

 #parent-div{ background: #B3bEb5; border: 0.1em solid black; } #default{ background: #DBE9F4; } #centered{ background: #89CFF0; width: 50%; margin: auto; } /* text-align: left, right, center, justify */ #centered-text{ text-align: center; } /* Absolute Positioning : Positioning Based on the Document */ #top-left-pos{ background: #89CFF0; border: 0.1em solid black; position: absolute; width: 200px; height: 100px; } #bottom-right-tl-parent { background: #DBE9F4; position: absolute; bottom: 0px; right: 0px; } #another-pos{ background: #FF0000; border: 0.1em solid black; position: absolute; width: 190px; height: 110px; } 

 <div id="parent-div"> <div id="default">Default</div> <div id="centered">Centered</div> <div id="centered-text">Centered Text</div> </div> <!-- Demonstrate Absolute Postioning --> <div id="top-left-pos">Top Left <div id="bottom-right-tl-parent">Bottom Right Parent</div> </div> <div id="another-pos">Top Right </div> 

absolutely positioned top-left-pos element, positions in next row to centered-text element, whose behaviour similar to static positioned elements.

But, below is the output,

So, Why every new absolutely positioned element another-pos is rendered over previous absolutely positioned element top-left-pos ? why another-pos element is not rendered as next block element?

With the above code, am expecting another-pos element to be rendered as shown below,

Answer 1

So, Why every new absolutely positioned element another-posis rendered over previous absolutely positioned element top-left-pos? why another-pos element is not rendered as next block element?

"The absolutely positioned element is positioned relative to nearest positioned ancestor(non static). If a positioned ancestor doesn't exist, the initial container is used."

Src: CSS/position

This means that if you have 1 or 10 elements using position: absolute , they all start at the same top/left position (if you omit those values in your css rule).

As such they are also taken out of normal flow, which below sample shows, where yet another div, #another-nonpos , using normal flow starts after the previous normal flowed element.

It also shows that positioned elements have a higher z-index than non positioned, making them stay in a higher layer (on top of).

Further reading about z-index: Understanding CSS z-index

 #parent-div{ background: #B3bEb5; border: 0.1em solid black; } #default{ background: #DBE9F4; } #centered{ background: #89CFF0; width: 50%; margin: auto; } /* text-align: left, right, center, justify */ #centered-text{ text-align: center; } /* Absolute Positioning : Positioning Based on the Document */ #top-left-pos{ background: #89CFF0; border: 0.1em solid black; position: absolute; width: 200px; height: 100px; } #bottom-right-tl-parent { background: #DBE9F4; position: absolute; bottom: 0px; right: 0px; } #another-pos{ background: #FF0000; border: 0.1em solid black; position: absolute; width: 190px; height: 110px; } #another-nonpos{ background: lime; height: 200px; text-align: right } 

 <div id="parent-div"> <div id="default">Default</div> <div id="centered">Centered</div> <div id="centered-text">Centered Text</div> </div> <!-- Demonstrate Absolute Postioning --> <div id="top-left-pos">Top Left <div id="bottom-right-tl-parent">Bottom Right Parent</div> </div> <div id="another-pos">Top Right </div> <div id="another-nonpos">Non absolute </div> 

Answer 2

因为#top-left-pos具有更大的z-index属性值

Answer 3

Because both the elements have same z index and you have not specified the left and top parameters.If both of them have same z-index and also no coordinates are specified the second one would be placed over the previous one .

#top-left-pos {
        top: 0;
    }

Set top property to a number will solve the issue

https://jsfiddle.net/00s3f6gj/

Answer 4

When using position:absolute , the div has nothing to do with the document and and gets the parent level regardless of using z-index . in your case, the bottom-right-tl-parent is the child of top-left-pos , thus increasing z-index value wont effect its level. if you move the bottom-right-tl-parent out of top-left-pos, you will be able to apply your z-index and it will work:

<div id="top-left-pos">Top Left</div>
<div id="bottom-right-tl-parent">Bottom Right Parent</div>

Answer 5

The z-index is initially set to auto and applies on all positioned elements. So as the element with id "top-left-pos" has a specified z-index its value is always higher than auto. So, it always stays on top.