为什么将绝对定位元素的兄弟设置为 position:relative，使其高于前者？答案

【问题标题】：Why setting absolutely positioned element's sibling as position:relative, brings it above the former?为什么将绝对定位元素的兄弟设置为 position:relative，使其高于前者？
【发布时间】：2018-07-28 16:29:39
【问题描述】：

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="c1">
    <div class="c2">
      <div class="circle">
      </div>
      <div class="c3">
        <div class="c4">    
        </div>
      </div>
    </div>
  </div>
</body>
</html>

如果我们将.c3的位置更改为position:relative，如果我们不设置.c3的position，它会显示在.circle的上方，.circle的下方。为什么会这样？

Link to Jsbin

编辑：澄清

【问题讨论】：

标签： html css css-position absolute

【解决方案1】：

.c3 放置在 .circle 之后，如果 DOM 遵循 树顺序，.c3 在 .circle 之后。

如果两者都定位并且没有指定z-index，那么.c3将被放置在.circle之上，无论位置的值是什么：

对于亲戚，您将拥有：

body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  position: relative;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}

<div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>

使用 absolute 您将拥有：

body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  position: absolute;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}

<div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>

如你所见here:

由具有负数的已定位后代形成的堆叠上下文 z-index（不包括 0）按 z-index 顺序（最负数在前）然后 树序。

...

所有定位、不透明度或变换后代，按树顺序分为以下几类：

所有具有 'z-index: auto' 或 'z-index: 0' 的定位后代，按树顺序排列。 ...

由具有 z 索引的定位后代形成的堆叠上下文按 z-index 顺序大于或等于 1（最小的在前）然后是树 订购。

所以我们首先考虑z-index，如果相等或未指定，我们考虑树顺序。

现在如果.c3没有定位，而我们保持.circle定位，那么圆圈将在.c3上方

body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}

<div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>

在这种情况下，我们可以阅读：

由定位的后代形成的堆叠上下文与负 z-index（不包括 0） 按 z-index 顺序（最负数在前）然后树顺序。

对于所有流入、非定位、块级树顺序的后代：如果元素是块、列表项或其他等效块：

在 (3) 中，我们考虑具有负 z-index 且不同于 0 的定位元素（.circle 不是这种情况）所以我们还没有打印它，我们打印我们的流入元素 .c3遵循（4）。然后我们会有这个：

所有定位、不透明或变换后代，按树顺序分为以下几类：

所有具有 'z-index: auto' 或 'z-index: 0' 的定位后代，按树顺序排列。 ...

现在我们打印.circle，它解释了为什么在这种情况下圆圈在.c3上方。

如果您为圆指定负 z-index，它将落在 (3) 中，因此它将低于 .c3。

body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  z-index:-1;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}

<div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>

如果您为 .circle 指定 正 z-index，您将使其遵循 (9) 而不是 (8)，并且它将保持在上方：

body {
  width: 500px;
  height: 500px;
}

.c1 {
  border: 1px solid blue;
  width: 90%;
  height: 90%;
}

.c2 {
  border: 1px solid green;
  width: 90%;
  height: 90%;
}

.c3 {
  border: 1px solid yellow;
  width: 90%;
  height: 90%;
  background: blue;
}

.c4 {
  border: 1px solid red;
  width: 90%;
  height: 90%;
}

.circle {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  z-index:1;
  top: 200px;
  left: 350px;
  border-radius: 50%;
}

<div class="c1">
  <div class="c2">
    <div class="circle">
    </div>
    <div class="c3">
      <div class="c4">
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答。如果我们同时删除相对和绝对，即不提及c3 的位置，则c3 会呈现在圆圈下方。为什么？
@q126y 补充说明