Why absolutely positioned elements render over previous absolutely positioned element? - html

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

Because the #top-left-pos has greater value of z-index property

Answer 3

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 4

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.

Answer 5

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/