这是我参与更文挑战的第19天，活动详情查看：更文挑战
一、什么是层叠上下文
层叠上下文（stacking context）：
其实就是我们虚构的一个概念，就像是我们看页面的时候，你看着好像只有一层，其实有很多层。 如果是层叠上下文的元素，就拥有优先接近我们用户的权力。（好像接近我们多好似的。
二、z-index
要讲层叠上下文，就必须讲一下z-index，z-index规定了元素的层级关系。
当我们要指定元素的排列顺序的时候，给元素指定z-index就可以修改它的顺序。
注意：z-index只对指定了position属性的元素有效。
z-index数值越大，它的优先级越高，也就是在上面。
如果没有指定z-index的情况下，所有的元素默认都在默认层（0层） ，比如
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
div {
opacity: 0.7;
position: relative;
}
#div1 {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
}
#div2 {
width: 200px;
height: 200px;
background-color: rgb(234, 0, 255);
margin-left: 50px;
position: absolute;
z-index: 1;
}
#div3 {
width: 200px;
height: 200px;
background-color: rgb(255, 187, 0);
margin-left: 100px;
position: absolute;
z-index: 2;
}
效果?
三、层叠水平（stacking level）
如果说层叠上下文就是一种有优先接近我们的权力，那层叠水平就是决定了同一个层叠上下文当中元素在z轴上的显示顺序。
层叠水平不是刚刚提到的z-index，虽然z-index能够影响层叠水平，但是z-index只作用于拥有定位的元素。而层叠水平存在于所有的元素。
四、为什么会有层叠上下文
当我们渲染网页的时候，有可能因为网络延迟等问题没有在很短的时间内渲染出来，也就是说，可能是先渲染了一部分内容出来，那么我们想要的这部分先渲染出来的内容肯定是重要的，就可以让重要的内容的层叠顺序变得高。
五、层叠上下文的元素
根据MDN的定义，层叠上下文元素包括：
- 文档根元素（
<html>）； position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；flex容器的子元素，且z-index值不为auto；grid容器的子元素，且z-index值不为auto；opacity属性值小于 1 的元素；mix-blend-mode属性值不为normal的元素；- 以下任意属性值不为 none 的元素：
transformfilterperspectiveclip-pathmask/mask-image/mask-border
isolation属性值为isolate的元素；-webkit-overflow-scrolling属性值为touch的元素；will-change值设定了任一属性而该属性在non-initial值时会创建层叠上下文的元素（参考这篇文章）；contain属性值为layout、paint或包含它们其中之一的合成值的元素。
参考文章：
MDN文档
张鑫旭《深入理解CSS中的层叠上下文和层叠顺序》
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！