stackingcontext堆栈上下文（stackingcontext）是HTML中的一个三维概念。如果一个元素包含一个堆叠上下文，我们可以理解这个元素在Z轴上是“优越的”。Z轴表示用户和屏幕之间没有距离。现有的垂直线，通俗地说，就是人眼看屏幕的视线。这条垂直于屏幕的线有一个堆叠上下文。元素包括：页面的根元素天生有一个堆叠上下文，称为“根堆叠上下文”z-index值为数值的定位元素也有一个堆叠上下文其他属性也可以有一个堆叠上下文stackinglevel堆叠层次决定了同一堆叠上下文中元素在z轴上的显示顺序。普通元素的层叠层次首先由层叠上下文决定，所以层叠层次的比较只有在当前层叠上下文元素中才有意义。需要注意的是，不要将级联层级与CSS的z-index属性混淆。是的，z-index在某些情况下确实可以影响层叠Horizo??ntal，但仅限于定位元素和flex/inline-flex子元素，所有层叠的元素都有层叠顺序。堆叠顺序（stackingorder）是元素堆叠时特定的垂直显示顺序。注意上面的堆叠上下文和堆叠层级是一个概念，这里的堆叠顺序规则是Box（布局）>background/border（装饰），因为这样更符合页面加载的功能和视觉呈现级联序列实例本例中，红色div带有inline-block属性，行内属性span>float:left属性image>block属性绿色div。但是有一点，blockdiv的文字会在inline-blockdiv的背景色之上，因为背景堆叠顺序是最低的z-index和堆叠上下文定位元素默认z-index:auto可以看做是z-index:0z-定位索引不是auto的元素会创建一个层叠上下文（除了IE7，auto也会创建）z-index层叠顺序的比较在父层叠上下文停止三种实例第一个例子中，position:relative属性是应用图像z-index:auto，堆叠顺序大于普通inline-block元素，所以定位图片覆盖普通图片。第二个例子，父容器设置为position:absolute，子元素image设置为position:relative。这时我们给图片加上z-index：-1，图片在背景色后面，因为设置了z-index的图片的stackingcontext元素是页面的根元素；这个时候我们给父容器加上z-index:0，图片的stackingcontext元素就变成了父容器，这时候图片回归背景色，因为z-index:-1堆叠级别高于堆叠上下文的背景颜色。第三个例子中，虽然第一个子元素设置了z-index:999999，第二个子元素z-index:-1，但是它们的堆叠上下文作用于父元素的z-index，所以第一张图片被覆盖了第二张图其他属性和层叠上下文其他参与层叠上下文的属性：z-index值不为auto的flex项（父元素display:flex|inline-flex）。元素的不透明度值不是1。元素的变换值不是无。元素的mix-blend-mode值不正常。元素的过滤器值不是无。元素的隔离值是isolate.position:fixed语句（IE不支持）。will-change指定的属性值为以上任意一种。元素的-webkit-overflow-scrolling设置为touch。（移动端）其他属性上面的例子和堆叠上下文的例子展示了规则1-8。我们设置了8个div盒子，盒子里放了8张图片，然后给图片position:relative和z-index:-1。这时候图片的堆叠上下文元素就是根堆叠上下文，图片被背景色覆盖，然后我们在div盒子里用8条规则，盒子就变成了堆叠上下文，图片出现在了上面背景颜色。这里有一个问题。本来有8张图片，这里出现的只有7张，原因是transform和position:fixed同时存在时position:fixed失效，导致例7中图片的stackingcontext被覆盖。stackingcontextz-index和其他css属性不依赖于z-index的堆叠上下文元素的堆叠顺序。都是z-index:autoleveldependsthestackingorderofthez-indexstackingcontextelementsdependedthez-indexvaluedependsthez-indexvaluetocreatethestackingcontext:pposition值为relative/absolute或fixed（非IE浏览器）display:flex|inline-flex容器的childflexitemz-index和positioningelement在这个例子中，我们先设置一个imagestackingcontext，然后设置一个parentcontainer为flex，子元素的堆叠上下文z-index：1；这里先将第一张图片堆叠上下文与flex子元素图片堆叠上下文进行比较，堆叠顺序由z-index的大小决定，即谁大谁在层叠上下文之上导致文字在图片上消失？在这个例子中，有一个现象，就是动画运行时，文字跑到图片后面了。根据我们前面了解到的，当opacity不为1时，就是Withcascadingcontext，级联级别和z-index:auto一样，也就是和absolute在同一级别。本着谁大谁在上的原则，图片会盖住文字。解决方法：调整DOM流的顺序，将文字放在改善文字在图片后面的堆叠顺序，如z-index：1z-index相关实践1.最小化影响原则目的：避免z-的混乱index嵌套堆叠关系原因：元素的堆叠层次主要由堆叠上下文决定；IE7z-index:auto也会创建一个新的级联上下文；方法：避免使用定位属性；定位属性从大容器分离到私有小容器，可以参考相关做法2.尽量不要使用大于2的z-index目的：避免z-索引混乱，一个元素被样式问题大于元素的z-index原因：多人协作和后期维护实践：对于非浮动元素，避免设置z-index值，z-index值没有必要超过23。Componentlevelcounter目的：避免因为z-index导致浮层组件被覆盖的问题原因：总会有意想不到的高层元素组件。组件的覆盖规则是动态的。元素的最大z-index值为4负z-index和accessibilityhiding使用accessibilityhiding解决低版本表单提交按钮的兼容性问题这种情况下可以使用z-index:-1来隐藏原始提交使用美化标签控制提交；如果不需要兼容低版本浏览器，可以直接使用display:none深入理解CSS中的级联上下文和级联顺序
