CODEWITHSUNDEEP
htmlcsscss-position
overexchange
overexchange

Reputation: 1

Why absolutely positioned elements render over previous absolutely positioned element?

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,

enter image description here

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,

enter image description here

Upvotes: 1

Views: 1866

Answers (5)

Asons
Asons

Reputation: 87191

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>

Upvotes: 3

Able Johnson
Able Johnson

Reputation: 571

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/

Upvotes: 0

Pratikshya
Pratikshya

Reputation: 202

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.

Upvotes: 0

SG_Rowin
SG_Rowin

Reputation: 622

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>

Upvotes: 0

Alexander Elgin
Alexander Elgin

Reputation: 6956

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

Upvotes: 1

Related Questions