首页
前端开发
为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者?

为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者? [英] Why setting absolutely positioned element's sibling as position:relative, brings it above the former?

查看：29 发布时间：2021/11/26 15:58:29 html css css-position absolute

本文介绍了为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML

<头><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><身体><div class="c1"><div class="c2"><div class="circle">

<div class="c3"><div class="c4">

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

Jsbin 链接

澄清

解决方案

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

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

与亲戚一起，您将拥有:

body {宽度:500px；高度:500px；}.c1{边框:1px纯蓝色；宽度:90%；高度:90%；}.c2{边框:1px纯绿色；宽度:90%；高度:90%；}.c3 {边框:1px纯黄色；宽度:90%；高度:90%；位置:相对；背景:蓝色；}.c4 {边框:1px纯红色；宽度:90%；高度:90%；}.圆圈 {宽度:100px；高度:100px；背景:#f00；位置:绝对；顶部:200px；左:350px；边界半径:50%；}


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

使用绝对值，您将拥有:

body {宽度:500px；高度:500px；}.c1{边框:1px纯蓝色；宽度:90%；高度:90%；}.c2{边框:1px纯绿色；宽度:90%；高度:90%；}.c3 {边框:1px纯黄色；宽度:90%；高度:90%；位置:绝对；背景:蓝色；}.c4 {边框:1px纯红色；宽度:90%；高度:90%；}.圆圈 {宽度:100px；高度:100px；背景:#f00；位置:绝对；顶部:200px；左:350px；边界半径:50%；}


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

您可以在此处阅读:

<块引用>

由带有负数的定位后代形成的堆叠上下文z 索引(不包括 0)按 z 索引顺序(最负的在前)然后树顺序.

...

所有定位、不透明或变换后代，按树顺序，属于以下类别:
1. 所有带有 'z-index: auto' 或 'z-index: 0' 的定位后代，按树顺序排列....
由具有 z 索引的定位后代形成的堆叠上下文按 z-index 顺序大于或等于 1(最小的在前)然后是树订购.

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

<小时>

现在如果.c3 未定位并且我们保持.circle 定位，圆圈将在上方.c3

body {宽度:500px；高度:500px；}.c1{边框:1px纯蓝色；宽度:90%；高度:90%；}.c2{边框:1px纯绿色；宽度:90%；高度:90%；}.c3 {边框:1px纯黄色；宽度:90%；高度:90%；背景:蓝色；}.c4 {边框:1px纯红色；宽度:90%；高度:90%；}.圆圈 {宽度:100px；高度:100px；背景:#f00；位置:绝对；顶部:200px；左:350px；边界半径:50%；}


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

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

<块引用>

由定位后代形成的堆叠上下文具有否定z 索引(不包括 0) 按 z 索引顺序(最负的在前)然后树序.
对于所有流入的、非定位的、块级的树顺序的后代:如果元素是块、列表项或其他块等效:

在 (3) 中，我们考虑了 z-index 为负且不同于 0 的定位元素(.circle 不是这种情况)所以我们还没有打印它，而是打印我们的-flow 元素 .c3 遵循 (4).然后我们会有这个:

<块引用>

所有定位、不透明度或变换后代，按树形顺序排列分为以下几类:
1. 所有带有 'z-index: auto' 或 'z-index: 0' 的定位后代，按树顺序排列....

现在我们打印 .circle 这解释了为什么在这种情况下圆圈位于 .c3 之上.

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

body {宽度:500px；高度:500px；}.c1{边框:1px纯蓝色；宽度:90%；高度:90%；}.c2{边框:1px纯绿色；宽度:90%；高度:90%；}.c3 {边框:1px纯黄色；宽度:90%；高度:90%；背景:蓝色；}.c4 {边框:1px纯红色；宽度:90%；高度:90%；}.圆圈 {宽度:100px；高度:100px；背景:#f00；位置:绝对；z-索引:-1；顶部:200px；左:350px；边界半径:50%；}


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

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

body {宽度:500px；高度:500px；}.c1{边框:1px纯蓝色；宽度:90%；高度:90%；}.c2{边框:1px纯绿色；宽度:90%；高度:90%；}.c3 {边框:1px纯黄色；宽度:90%；高度:90%；背景:蓝色；}.c4 {边框:1px纯红色；宽度:90%；高度:90%；}.圆圈 {宽度:100px；高度:100px；背景:#f00；位置:绝对；z-索引:1；顶部:200px；左:350px；边界半径:50%；}


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

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>

If we change position of .c3 as position:relative, it is displayed on top of .circle, below the .circle, if we don't set position of .c3. Why does it happen?

Link to Jsbin

Edit: Clarified

解决方案

.c3 is placed after the .circle if the DOM so following the tree order .c3 is after .circle.

If both are positioned and there is no z-index specified so the .c3 will be placed above the .circle whatever the value of position is:

With relative you will have this:

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>

With absolute you will have this:

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>

As you can read 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.

So we first consider z-index and if equal or not specified we consider tree order.

Now if .c3 is not positioned and we keep .circle positioned, the circle will go above .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>

In this case we can read this:

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:

In the (3) we consider positioned element with negative z-index and different from 0 (the .circle is not this case) so we don't print it yet and we print our in-flow element .c3 following (4). Then we will have this:

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

Now we print the .circle which explain why the circle is above the .c3 in this case.

If you specify a negative z-index to the circle it will fall in the (3) and thus it will be below .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>

If you specify a positive z-index to .circle you will make it follow the (9) instead of the (8) and it will remain above:

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，使其高于前者?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者? [英] Why setting absolutely positioned element's sibling as position:relative, brings it above the former?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者? [英] Why setting absolutely positioned element&#39;s sibling as position:relative, brings it above the former?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

为什么将绝对定位元素的兄弟元素设置为 position:relative，使其高于前者? [英] Why setting absolutely positioned element's sibling as position:relative, brings it above the former?

登录关闭