- 首页
- 前端开发
- 为什么将绝对定位元素的兄弟元素设置为 position:relative,使其高于前者?
为什么将绝对定位元素的兄弟元素设置为 position:relative,使其高于前者?
[英] Why setting absolutely positioned element's sibling as position:relative, brings it above the former?
本文介绍了为什么将绝对定位元素的兄弟元素设置为 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">
</html>
如果我们将.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 索引顺序(最负的在前)然后树顺序.
...
所有定位、不透明度或变换后代,按树顺序,属于以下类别:
- 所有带有 '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-indices(不包括 0) 按 z-index 顺序(最负的在前)然后树顺序.
对于所有流入的、非定位的、块级的树顺序的后代:如果元素是块、列表项或其他块等效:
在 (3) 中,我们考虑了 z-index 为负且不同于 0 的定位元素(.circle
不是这种情况)所以我们还没有打印它,而是打印我们的-flow 元素 .c3
遵循 (4).然后我们会有这个:
<块引用>- 所有定位、不透明度或变换后代,按树形顺序排列分为以下几类:
- 所有带有 '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屋!
查看全文