如果以上三点都可以的话，看完这篇文章你就会永远说再见。遇到z-index问题，永远不会“盲目改变和随机尝试”三个概念--stackingcontext,stackinglevel,andstackingorder上下文（stackingcontext）看到关键字context，我想大家应该有点概念了，那就是对，上下文。你所知道的BFC和IFC中的上下文具有相同的含义。其实我想说的是css世界里的上下文或者XXX上下文其实是一个意思。折腾，不受其他上下文影响。当然，这个上下文可以被其他上下文包含，也可以包含其他上下文。层叠层级（stackinglevel）决定了同一层叠上下文中元素在Z轴上的显示顺序。页面中的所有元素（常规元素和堆叠上下文元素）都有堆叠级别。但是，普通元素的堆叠层次的讨论仅限于堆叠上下文元素。注意：不要将堆叠级别与z-index混淆。虽然z-index在某些情况下确实可以影响层叠层次，但仅限于有层叠上下文的元素，层叠层次是对所有元素都存在的层叠。顺序（stackingorder）堆叠顺序是指发生堆叠时有特定的垂直显示顺序（规则）。即：这个网上很流行的规则对这张图做了一些补充：底部的背景/边框特指堆叠上下文元素的边框和背景色。每个堆叠顺序规则只适用于当前堆叠上下文元素的smallworldinlinehorizo??ntalbox，指的是包括inline/inline-block/inline-table元素的堆叠顺序。他们都处于同一水平。单纯从stacking层面来说，其实z-index:0和auto可以看成是一样的，只是在stackingcontext这个领域有本质区别。深入理解堆叠上下文特征。堆叠上下文的堆叠层次高于普通元素。高堆叠上下文可以阻塞元素的混合模式。可以嵌套，内部层叠上下文及其所有子元素受制于外部层叠上下文。每个堆叠上下文都独立于兄弟元素。也就是说，在进行堆叠变化或渲染时，只需要考虑后代元素。每个堆栈上下文都是独立的。当元素被堆叠时，整个元素被认为处于父堆叠上下文的堆叠顺序中。如何创建根元素（HTML）z-index值不是“auto”的绝对/相对定位/iebrowserposition:fixed也可以）z-index值不是“auto”的弹性项目（flexitem）,即:父元素显示:flex|inline-flexopacity属性值小于1(opacity参考规范)transform属性值不为"none"mix-blend-mode属性值不为的元素过滤值不是“none”的“普通”元素透视值不是“none”的元素直接给那些属性赋值（见这篇文章）——webkit-overflow-scrolling属性设置为“touch”的元素CascadingContext和CascadingOrder文中多次提到，普通元素的级联层次会变高当他们有级联上下文时。那么他在级联序列的规则图中的什么位置呢？向上锁定你的眼睛。第二篇列出了12种可能的元素。我们将创建级联上下文的方法分为两类：第二类和第三类以及其他类。取决于z-index的值：位置取决于z-index的值不依赖于z-index的值：图中第二高的位置，即：z-index=autoor0用例子举例说明：111