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？为什么另一个pos元素不会呈现为下一个块元素？

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

Src：CSS/position

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

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

它还表明定位元素的z-index比非定位元素更高，使它们保持在更高层（在顶部）。

进一步阅读z-index：Understanding CSS z-index

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

因为两个元素具有相同的z索引，并且您没有指定左侧和顶部参数。如果它们都具有相同的z-index并且也没有指定坐标，则第二个将放置在前一个上。

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

将顶级属性设置为数字将解决问题

https://jsfiddle.net/00s3f6gj/

Answer 4

使用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 5

z-index 最初设置为auto并应用于所有定位元素。因此，id为“top-left-pos”的元素具有指定的 z-index ，其值始终高于auto。所以，它总是保持领先。

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

5 个答案: