为什么位置:相对；似乎改变了z-index? [英] Why does position:relative; appear to change the z-index?
问题描述
所以我有这个标记，里面有<div class="mask"></div>，它在图像的顶部设置了蓝色叠加层.
如果我不制作.container position:relative，则标题文本将隐藏在蓝色层后面...几乎就像是在模仿z-index
为什么会这样?
笔: https://codepen.io/anon/pen/OBbbZB
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
您需要参考规范，更确切地说是
然后在步骤(8)中打印定位的元素(包括.mask)
- 所有定位的，不透明或转换后代，按树顺序分为以下类别
现在，当您添加position:relative时，还要使容器也定位，因此它也将落入步骤(8)中，并且如此处所述，我们考虑树顺序，因为两者都没有z-index已指定.因此，在这种情况下，.container将在以后打印.
如果更改元素的顺序(在遮罩之前制作容器)，您会注意到position:relative不会有任何效果，因为在两种情况下，绘制顺序都是相同的:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative; /* you can remove this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container">
<h1>Hello World</h1>
</div>
<div class="mask"></div>
</section>
如果我们检查步骤(8)，它还会说 opacity或transform ，这意味着如果您还更改了容器的不透明度或添加了转换，则顺序也会改变.
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
transform:translate(0); /*added this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
要注意的是，如果添加z-index(负数或正数)，也会影响绘画顺序，在这种情况下，树形顺序将无效.
- 由具有负z索引(不包括0)的位置后代按z索引顺序(最负的优先)然后按树顺序形成的堆叠上下文
....
- 由z索引大于或等于1的定位后代按z索引顺序(最小的顺序为小)然后按树顺序形成的堆叠上下文.
我们在(3)处打印负数z-index并在(9)处打印正数的元素，在这些步骤之间，我们遇到了所有不涉及z-index的情况，如开头所述.
So I have this markup and inside it there is <div class="mask"></div> which sets the blue overlay ontop of the image.
If I don't make the .container position:relative, the title text gets hidden behind the blue layer... Almost as if it's usage is mimicking z-index
Why is this the case?
Pen: https://codepen.io/anon/pen/OBbbZB
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
You need to refer to the specification and more precisely the painting order to understand when each layer is printed.
Without position:relative your element is not positioned and will be printed in the step (4):
- 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:
Then we print the positioned elements (including the .mask) in the step (8)
- All positioned, opacity or transform descendants, in tree order that fall into the following categories
Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will printed later in this case.
If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative; /* you can remove this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container">
<h1>Hello World</h1>
</div>
<div class="mask"></div>
</section>
If we check the step (8) it also said opacity or transform which means that if you also change the opacity of the container or add a transform, the order will change too.
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
transform:translate(0); /*added this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
It's also trivial to notice that if you add z-index (either negative or positive) you will also affect the painting order and in this case the tree order will have no effect.
- Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then 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.
We print the element with negative z-index at (3) and the positive ones at (9) and between those steps we have all the cases where z-index is not involved like described intially.
这篇关于为什么位置:相对；似乎改变了z-index?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
