最近在做项目的过程中遇到了一个问题。menu-bar希望一直显示在最上面，下面显示下面的元素。那个时候z-index还没有设置。效果，不知道是什么原因，于是找了css中关于cascading的资料，解决了这个问题。记录到这里吧~屏幕是一个二维平面，但是HTML元素是在三维坐标系中排列的，x是水平位置，y是垂直位置，z是屏幕的位置从从内到外。当我们看屏幕时，我们是沿着z轴从外向内看屏幕；因此，从用户的角度来看，元素形成了分层关系。它可能覆盖其他元素或被其他元素覆盖；那么这里有几个重要的概念：堆叠上下文（stackingcontext,StackingContext）,堆叠层级（stackinglevel,StackingLevel）,堆叠顺序（stackingorder,堆叠顺序,StackingOrder）,z-index声明：下面定位元素参考position:absolute|fixed|relative|sticky以下非定位元素参考position:initial|static关于堆叠上下文也有类似的概念：块级格式化上下文（BFC，BlockFormattingContext），可以参考CSS中重要的BFC，也介绍了文档流的一些内容；这篇文章比较长，但是如果你有勇气看完，应该对级联的概念有一个基本的掌握了(～o￣▽￣)～1。堆叠上下文（StackingContext）堆叠上下文（StackingContext，StackingContext）是HTML中的一个三维概念。在CSS2.1规范中，每个元素的位置都是三维的。当一个元素堆叠时，它可能会覆盖其他元素或被其他元素覆盖；z轴上的位置越高，离屏幕观察者的距离越近最近的文章《关于z-index你不知道的事情》中有一个很好的比喻，这里引用一下；你可以想象一个表，上面有一堆项目，这个表代表了一个级联上下文。如果第一个表旁边有第二个表，则第二个表代表另一个堆叠上下文。现在想象第一张桌子上有四个小立方体，它们都直接放在桌子上。四个立方体的上面是一块玻璃，玻璃上面是一盘水果。这些立方体、玻璃片和水果碗各自代表分层上下文中的不同层，而这个分层上下文就是表格。每个网页都有一个默认的堆栈上下文。这个级联上下文（表）的根是。html标签中的所有内容都放置在此默认堆栈上下文的堆栈层上（项目放置在表格上）。当你给一个定位元素一个auto以外的z-index值时，你创建了一个新的堆叠上下文，其堆叠层独立于页面上的其他堆叠上下文和堆叠层，这相当于把另一个表带进了房间。堆叠上下文1（StackingContext1）由文档根元素构成，堆叠上下文2和堆叠上下文3（StackingContext2,3）是堆叠上下文1（StackingContext1）上的堆叠层。它们中的每一个还形成一个新的堆叠上下文，其中包含新的堆叠层。在堆叠上下文中，其子元素根据上述规则堆叠。形成级联上下文的方法有：根元素的position值为绝对的flex元素|相对的，其z-index值不是自动定位，其值是固定的|stickyz-index不是auto，即：父元素显示：flex|属性值小于1的inline-flexopacity元素transform属性值不是none的元素mix-blend-mode属性值不是normal元素filter,perspective,clip-path,mask,mask-image,mask-border,motion-path值不为none的元素perspective值不为none的元素isolation属性设置为隔离will-change中指定的任何CSS属性，即使你没有直接指定这些属性的值-webkit-overflow-scrolling属性设置为touch的元素总结：stackingcontext可以包含在其他stackingcontext中，共同构成一个层次化的stackingcontext。每个堆叠上下文完全独立于其兄弟元素。处理堆叠时，只考虑子元素。这里和BFC类似，每一个堆叠上下文都是自包含的：当一个元素的内容被堆叠时，整个元素会在父级堆叠上下文中按顺序堆叠2.堆叠级别（StackingLevel）堆叠级别（stackinglevel,Stackinglevel)决定了元素在z轴上同一层叠上下文中的显示顺序的概念；普通元素的堆叠级别由其所在的堆叠上下文确定优先级。堆叠层次的比较只有在相同的堆叠上下文元素中才有意义。在一个层叠上下文中，层叠层级描述定义了层叠上下文中元素在Z轴上的上下顺序注意层叠层级不一定由z-index决定，只有定位元素的层叠层级由z-index，其他类型元素的级联级别由级联顺序决定，它们在HTML中出现的顺序，以及其父元素之上的级联级别。详细规则见下文级联顺序介绍。3.z-index在CSS2.1中，所有的盒模型元素都在三维坐标系中。除了我们常用的横坐标和纵坐标外，盒模型元素还可以沿“z轴”堆叠。当它们相互重叠时，z轴顺序就变得非常重要。--CSS2.1Section9.9.1-Layeredpresentationz-index只适用于定位元素，不适用于非定位元素，它可以设置为正整数、负整数、0、auto，如果定位元素没有设置z-index，则默认为auto；元素的z-index值仅在相同的堆叠上下文中才有意义。如果父层叠上下文的层叠级别低于另一个层叠上下文，则z-index有多高并不重要。所以如果你遇到一个很大的z-index值，但是它不起作用，检查它的父层叠上下文是否被其他层叠上下文覆盖。4.堆叠顺序（StackingOrder）堆叠顺序（stackingorder,stackingorder,StackingOrder）描述了元素在同一个堆叠上下文中的顺序规则。从栈底开始，有七种堆叠顺序：backgroundandborder：构成堆叠上下文的元素的背景和边框。负z-index值：在堆叠上下文中z-index为负值的定位子元素，负值越大，堆叠层级越低；block-levelbox：块级，文档流中的非定位子元素；floatingbox：非定位浮动元素；inlinebox：文档流中的内联、非定位子元素；z-index:0：定位了z-index为0或auto的元素，这些元素组成一个新的堆叠上下文；positivez-indexvalue：z-index是正定位元素，正值越大，堆叠层次越高；相同堆叠顺序的元素按照它们在HTML中出现的顺序堆叠；7阶元素会显示在前一阶元素之上，即看起来被覆盖增加了更多低阶元素：5.实战5.1一般情况下，三个相对定位的div块各自颜色绝对不同span.red、span.green和span.blue，它们都设置了position:absolute;参见Codepen-Normalcase然后当没有元素包含z-index属性时，本例中的元素按以下顺序堆叠（从下到上顺序）：根元素的背景和border块级非定位元素按照它们在HTML中出现的顺序堆叠内联非定位元素按照在HTML中出现的顺序堆叠。定位元素根据HTML中出现的顺序堆叠。红绿蓝都是z-index为auto的定位元素。因此，根据7层堆叠顺序规则，它们属于第六层堆叠顺序，所以按HTML中出现的顺序堆叠：red->green->blue5.2父元素的情况下相同的stackingcontext，red和green位于一个div.first-box下，blue位于一个div.second-box下，红绿蓝都设置了Position:absolute，first-box和second-box是都设置为位置：相对；请参阅Codepen-父元素不同但位于根元素下。本例中红蓝绿元素的父元素first-box和second-box都没有生成新的堆叠上下文，它们都属于根堆叠上下文中的元素，都在第6层的堆叠顺序，所以他们按照HTML中出现的顺序堆叠：red->green->blue5.3给子元素添加z-indexredgreen位于一个div.first-box下，blue和yellow位于一个div.second-box下，红绿蓝都设置了position:absolute。如果此时给green加上一个属性z-index:1，那么此时.green位于top；如果在.second-box下的.green之后添加绝对定位span.gold，设置z-index：-1，则位于红绿蓝下方；请参阅Codepen-在这个设置了z-index的示例中，在属于根堆叠上下文的红色、蓝色、绿色和黄色元素的父元素中没有生成新的堆叠上下文，红色和蓝色元素没有z-index集合，在堆叠顺序上都属于第6层，按照HTML中出现的顺序堆叠；绿色有一个正的z-index集合，属于第7层；黄色的z-index为负，属于level2；所以本例中从下到上的显示顺序是：黄色->红色->蓝色->绿色5.4不同层叠上下文的父元素情况下，红色绿色位于一个div.first-box下，蓝色位于一个div.first-box下在div.second-box下，红色、绿色和蓝色都设置为position:absolute。如果first-box的z-index设置的比second-box的z-index大，那么无论蓝色的z-index设置为z-index:999，蓝色都位于红色下方并且绿色的;如果我们只改变红色和绿色的z-index值，由于这两个元素都在父元素first-box生成的stackingcontext中，此时谁的z-index值高谁就在最上面;请参阅Codepen-不同堆叠上下文的父元素。本例中，red、green、blue属于设置了z-index的定位元素，但它们的父元素创建了新的堆叠上下文；红绿父元素first-box是一个z-index为正的定位元素，因此创建了一个堆叠上下文，属于堆叠顺序的第七层；蓝色父元素second-box也创建了一个堆叠上下文，在堆叠顺序中属于第六层；按照堆叠顺序，将第一个盒子中的所有元素排列到第二个盒子上；red和green属于stackingcontextfirst-box，设置不同的positivez-index，都属于stackingorder中的第七层；blue属于stackingcontext的second-box，设置了一个很大的正z-index，属于stackingelement中的第七层；虽然blue的z-index很大，但是因为second-box的stackinglevel比first-box小，所以位于red和green之下；所以在这个例子中，从低到高的顺序是：blue->red->green（我遇到的情况和这个例子情况类似）5.5设置子元素的opacityred和green位于div.first-box下，blue位于div.second-box下，红绿蓝设置为position:absolute，绿色设置为z-index：1，则此时绿色在红蓝之上；如果此时first-box设置了opacity:.99，那么不管红绿的z-index设置多大z-index:999，蓝色都在红绿色上面；如果在.second-box下的.green后面加一个span.gold，设置z-index:-1，那么它会位于红绿蓝下方；看Codepen-前面介绍过opacity的影响，设置opacity也可以形成stackingcontext，所以：first-box设置opacity，first-box成为新的stackingcontext；second-box没有形成新的堆叠上下文，所以里面的元素都属于根堆叠上下文；黄色属于堆叠顺序中的第2层，红色和绿色属于第7层，第一个盒子属于第6层，蓝色属于堆叠顺序中的第6层且位于第一个盒子上方按照HTML出现的顺序；所以在这个例子中从低到到的显示顺序为：黄色->红色->绿色->蓝色网上大部分的帖子都是深浅不一，甚至有些不一致。以下文章是学习过程的总结。如果发现错误，请留言指出~知乎Z-IndexMDN-z-indexWhatNoOneToldYouAboutZ-Index吃透CSS层叠上下文，层叠层级，层叠顺序，z-index前端性能优化为了更流畅的动画关于z-index那些你不知道的说说CSS中的级联相关概念推荐阅读：ImportantBFCinCSS
