代码之家 › 专栏 › 技术社区 › q126y

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

absolute css-position css html

q126y · 技术社区 · 6 年前

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 ,它显示在 .circle ,位于 .圆圈 ,如果我们不设置 position 属于 .c3类 . 为什么会这样?

Link to Jsbin

编辑:澄清

1 回复 | 直到 6 年前

Temani Afif 4 年前

.c3 放置在 .circle 如果DOM遵循 树顺序 .c3类 在之后 .圆圈 .

如果两者都是 已定位 而且没有 z指数 指定以便 .c3类 将放置在 .圆圈 无论职位的价值是什么:

有了relative,你将拥有:

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=“圆圈”>
</div>
<div class=“c3”>
<div class=“c4”>
</div>
</div>
</div>
</div>

正如你所看到的 here :

堆叠由带负数的定位子体形成的上下文 z指数顺序的z指数(不包括0)(最负的第一个) 然后 树顺序。

...

所有已定位 ,不透明度或变换子体,在 树顺序 可分为以下几类:

使用“z索引:自动”或“z索引:0”定位的所有子体 ,按树的顺序。 ...

使用z索引定位子体形成的堆叠上下文在z索引顺序中大于或等于1(最小的第一个) 然后是树 顺序 .

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

现在如果 .c3类 是 未定位 我们保持 .圆圈 已定位 ,圆圈将位于上方 .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=“圆圈”>
</div>
<div class=“c3”>
<div class=“c4”>
</div>
</div>
</div>
</div>

在这种情况下,我们可以阅读以下内容:

堆叠由定位子体形成的上下文 带负片 z指数(不包括0) 按z指数顺序(首先是最负的),然后树顺序。

对于所有流入、未定位、块级按树顺序的子体:如果元素是块、列表项或其他块等效物:

在(3)中,我们考虑z指数为负且与0不同的定位元素 .圆圈 不是这种情况)所以我们还没有打印它,而是打印我们的in-flow元素 .c3类 以下(4)。然后我们将得到:

所有已定位、不透明度或变换子体,按树顺序分为以下几类:

使用“z索引:自动”或“z索引:0”定位的所有子体 ,按树状排列。。。

现在我们打印 .圆圈 这解释了为什么圆在 .c3类 在这种情况下。

如果指定 负z指数 对于圆,它将落在(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=“圆圈”>
</div>
<div class=“c3”>
<div class=“c4”>
</div>
</div>
</div>
</div>

如果指定 正z指数 到 .圆圈 您将使其遵循(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=“圆圈”>
</div>
<div class=“c3”>
<div class=“c4”>
</div>
</div>
</div>
</div>