这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 描述下z-index和叠加上下文是如何形成的？】
标题：
【修真院wbe小课堂】描述下z-index和叠加上下文是如何形成的？
开场语：
大家好，我是IT修真院北京分院第37期的学员顾仁鹏，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css任务7，深度思考中的知识点——描述下z-index和层叠上下文是如何形成的？
（1）背景介绍：
凡事都有先后顺序，在CSS中，也是如此。一般情况下，元素都是在一个层面上，看不出差异。但是一旦元素之间出现了重叠，就不可能出现等同关系，就要有个先后顺序，这就产生了层叠顺序和层叠上下文，而z-index则是它们中的一部分。
（2）知识剖析：
什么是层叠上下文？什么是层叠水平?
层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。它是层叠元素的根本，两个层叠元素决定顺序，必须在同一个拥有层叠上下文元素中，也就是它们共同的父级或者祖先级。而作为一个拥有层叠上下文的元素自身严格的说它可以改变自己原先的层叠水平。
层叠水平英文称作”stacking level”，也可以叫层叠等级，决定了同一个层叠上下文中元素在z轴上的显示顺序。
什么是z-index？
w3school给出的定义是：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
层叠顺序：
正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border
注意：最重要的一点就是这个层叠顺序的前提是在同一个层叠上下文元素中！
层叠准则
仅靠层叠顺序图，无法处理所有css和html元素层叠时的顺序，所以就有了上面两条黄金准则，他可以处理所有层叠情况。
谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
层叠上下文的特性
层叠上下文的层叠水平要比普通元素高。
层叠上下文可以阻断元素的混合模式。
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
层叠上下文的创建
1. 页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
2. z-index值为数值的定位元素的传统层叠上下文。
3. 其他CSS3属性。
根层叠上下文：指的是页面根元素，也就是滚动条的默认的始作俑者 html 元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。
对于包含有position:relative/absolute/fixed的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。
z-index值不为auto的flex项(父元素display:flex|inline-flex).
1.元素的opacity值不是1.
2.元素的transform值不是none.
3.元素mix-blend-mode值不是normal.
4.元素的filter值不是none.
5.元素的isolation值是isolate.
6.will-change指定的属性值为上面任意一个。
7.元素的-webkit-overflow-scrolling设为touch.
（3）常见问题：
固定定位元素，滚动时被覆盖。
（4）解决方案：
给需要在最上面的固定定位元素的z-index设置一个正值，形成层叠上下文。
（5）编码实战：
.header {
width: 100%;
padding: 0 15px;
position: fixed;
z-index: 1024;
top: 0;
background-color: #29bde0;
}
<div class="header">
<div class="header-top">
<div class="header-left"></div>
<div class="header-middle">投票</div>
<div class="header-right"></div>
</div>
</div>
（6）拓展思考：
transform对定位元素的影响：
-
transform改变overflow对absolute元素的限制
2.transform限制position:fixed的跟随效果
3.transform限制absolute的100%宽度大小
（7）参考文献：
张鑫旭的文章
（8）更多讨论：
Q1：提问人：浮动元素与定位元素重叠
A1：回答人：
与相对定位元素重叠，浮动元素会在下面，但是相对定位元素的文字会形成字围效果，因为相对定位没有脱离文档流；与绝对定位或者固定定位重叠则依然定位元素在上面，而且文字正常不会出现字围。
Q2：提问人：出现重叠的方法？
A2：回答人：一般来说 定位 浮动 负margin。
Q3：提问人：利用重叠布局？
A3：回答人：可以利用浮动与普通元素重叠然后用margin来撑开两者之间的间距，从而形成一边宽度固定，一边自适应的布局。
（9）鸣谢：
感谢郭晨阳师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地