大佬教程收集整理的这篇文章主要介绍了为什么位置：相对；似乎改变了z-index？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
您需要参考规范，更确切地说是绘画顺序，以了解何时打印每一层。
在没有position:relative元素的情况下，未放置元素并将在步骤（4）中进行打印：
然后.mask在步骤（8）中打印定位的元素（包括）
现在，当您添加position:relative容器时，将容器也放置在这样的位置，因此它也将落入步骤（8）中，并且如此处所述，因为两者均未指定，所以我们考虑树的顺序z-index。因此，.container在这种情况下，将打印遗嘱。
如果更改元素的顺序（在遮罩之前制作容器），您会注意到这position:relative没有任何效果，因为在两种情况下，绘画顺序都是相同的：
body {
margin: 0;
@R_301_6837@-family: arial;
}
section {
position: relative;
BACkground: url(https://prevIEw.webpixels.io/@R_309_4031@-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），它也表示 不透明度或转换 ，这意味着如果您还更改了容器的不透明度或添加了转换，则顺序也会更改。
body {
margin: 0;
@R_301_6837@-family: arial;
}
section {
position: relative;
BACkground: url(https://prevIEw.webpixels.io/@R_309_4031@-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-index在（3）处打印带有负数的元素，并在（9）处打印带有正数的元素，在这些步骤之间，我们得到了所有z-index不涉及如最初描述的情况。
因此，我有此标记，并且在其内部<div class="mask"></div>设置了图像顶部的蓝色叠加层。
如果我不制作.container position:relative，标题文本将隐藏在蓝色层的后面&Hellip;好像它的用法在模仿z-index
为什么会这样呢？
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>
以上是大佬教程为你收集整理的为什么位置：相对；似乎改变了z-index？全部内容，希望文章能够帮你解决为什么位置：相对；似乎改变了z-index？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。