上一篇：《CSS世界》注4：流保护与销毁先容《CSS世界》本书还剩下六章，不过本书的精华部分主要是前面的内容。这里只展示博客中后续章节中相对重要的内容。想认识更多的朋友，不如看原文。毕竟一本300多页的书可不是几篇文章而已。博客可以非常清楚地说明这一点。《CSS世界》读书笔记系列博客到此也算是完结了。虽然是“二进宫”，但收获还是满满的。毕竟，每次你读一本好书，你都能读到新的东西。我还是要在这里吐槽一下。很多前端岗位的同学（当然不包括大帅哥！）对CSS关注度不高。不就是布局吗？记住几个属性就可以实现一个网页布局，但是就是这些同学，经常在做适配和页面调整的时候不停的抱怨，或者调整的时候差点重构，CSS代码一点都不健壮。殊不知合理使用CSS属性和健壮的布局能为你省去很多工作，甚至帮你省下很多js代码。看来“CSS重要性”断言写到这里了，哈哈！1、CSS世界中的级联规则声明：在CSS中，不仅仅只有z-index可以决定元素的z轴顺序。1.1元素堆叠层次补充说明：底部的背景/边框特指堆叠上下文元素的边框和背景色（后面会详细说明）。每个堆叠顺序规则只适用于当前堆叠上下文元素的小世界；inlinehorizo??ntalbox指的是inline/inline-block/inline-table元素的“堆叠顺序”，都在同一层；单纯从堆叠层面上看，其实z-index:0和z-index:auto可以看成是一样的。其实两者在级联上下文领域是有本质区别的。内联会高于标准的流盒和浮动盒元素。一旦成为定位元素，它的z-index就是默认的auto。根据上面的堆叠顺序表，会覆盖inline或者block或者float元素。1.2堆栈上下文（stackingcontext）堆栈上下文是一个类似于“BlockFormattingContext”（BFC）的概念。但是，这个概念相对虚构和抽象。为了便于理解，我们需要将其形象化。什么样的比喻方法？我们可以将层叠上下文理解为一种“层叠结界”，自成一个小世界。世界上可能还有其他“层叠壁垒”，自己也可能在其他“层叠壁垒”中。如何创建级联上下文(1)Innate：页面的根元素天生带有级联上下文，称为根级联上下文（html标签）(2)Orthodox：定位元素的传统“级联上下文”带有一个position的z-index值是相对/绝对的，在Firefox/IE（不包括Chrome）下position:fixed声明元素在其z-index值不是auto时将创建级联上下文。一个flex布局元素（父元素显示：flex|inline-flex），而z-index值不是auto，元素的opacity值不是1，元素的transform值不是none，mix-blend-mode值不正常，元素的filter值不为noneisolation值为isolate元素的will-change属性值，为以上2~6中的任意一项（如will-change:opacity,will-chang:transform,etc.)元素的-webkit-overflow-scrolling设置为touchCSS3以创建级联上下文引用：
