为什么绝对定位的元素会比以前的绝对定位的元素渲染？

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呈现出另一个posis？ 为什么another-pos元素未呈现为下一个块元素？

“绝对定位的元素相对于最近定位的祖先（非静态）定位。如果不存在定位的祖先，则使用初始容器。”

Src： CSS /位置

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

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

它还显示，定位的元素比未定位的元素具有更高的z索引，从而使它们停留在较高的层（位于其顶部）。

有关z-index的进一步阅读： 了解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

因为这两个元素都具有相同的z索引，并且您没有指定left和top参数，所以如果两个元素都具有相同的z-index并且未指定坐标，则第二个元素将放置在前一个元素上。

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

将top属性设置为数字将解决此问题

https://jsfiddle.net/00s3f6gj/

Answer 4

当使用position:absolute ，div与文档无关，并且无论使用z-index都获取父级。 在您的情况下， bottom-right-tl-parent是top-left-pos的子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 5

z索引最初设置为auto，并应用于所有定位的元素。 因此，由于ID为“ top-left-pos”的元素具有指定的z-index，因此其值始终高于auto。 因此，它始终保持在最前面。