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

Question

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，则显示在[=14=上面，[=14=下面]，如果不设置position 共 .c3。为什么会这样？

Link to Jsbin

编辑：澄清

Answer 1

.c3 放在 .circle 之后，如果 DOM 所以遵循 树顺序 .c3 在 [= 之后21=].

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

和亲戚在一起你会得到这个：

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:

Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

...

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. ...

Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.

所以我们首先考虑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>

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

Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:

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

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. ...

现在我们打印 .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>

如果你指定 positive z-index 到 .circle 你将使它遵循 (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>

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

Why setting absolutely positioned element's sibling as position:relative, brings it above the former?

html

css

css-position

absolute