为什么绝对定位的元素呈现在先前的绝对定位元素之上？

Question

在此代码中，

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

绝对定位top-left-pos元素，定位在centered-text元素的下一行，其行为类似于静态定位元素。

但是，下面是输出，

那么，为什么每个新的绝对定位元素 another-pos 都呈现在先前的绝对定位元素 top-left-pos 之上？为什么 another-pos 元素没有呈现为下一个块元素？

使用上面的代码，我希望 another-pos 元素呈现如下所示，

Answer 1

因为 #top-left-pos 的值大于 z-index 属性

Answer 2

因为两个元素具有相同的 z 索引并且您没有指定左侧和顶部 parameters.If 它们具有相同的 z-index 并且也没有指定坐标第二个将放置在前一个之上一个 .

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

将顶部属性设置为一个数字将解决问题

https://jsfiddle.net/00s3f6gj/

Answer 3

当使用 position:absolute 时，div 与文档无关并且无论使用 z-index 都获得父级别。在您的情况下，bottom-right-tl-parent 是 top-left-pos 的子级，因此增加 z-index 值不会影响其级别。如果您将 bottom-right-tl-parent 移出左上角位置，您将能够应用您的 z-index 并且它会起作用：

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

Answer 4

z-index 最初设置为自动并应用于所有定位元素。因此，由于具有 id "top-left-pos" 的元素具有指定的 z-index，因此其值始终高于 auto。因此，它始终保持在顶部。

Answer 5

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

来源：CSS/position

这意味着如果您有 1 个或 10 个元素使用 position: absolute，它们都从相同的 top/left 位置开始（如果您在 css 规则中省略了这些值）。

因此它们也从正常流中取出，如下面的示例所示，其中另一个 div、#another-nonpos 使用正常流在前一个正常流元素之后开始。

它还表明定位元素比非定位元素具有更高的 z-index，使它们位于更高层（在其之上）。

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

为什么绝对定位的元素呈现在先前的绝对定位元素之上？

Why absolutely positioned elements render over previous absolutely positioned element?

html

css

css-position