【CSS-12】

小课堂【STARKING CONTEXT】

分享人：任乃千

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

　　默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的顺序产生，想要理解这个顺序，就需要深入理解css中的层叠上下文和层叠顺序。我们大家熟悉的z-index是其中的一小部分。

2.知识剖析

　　层叠上下文即stacking context，是一个三维概念，z轴指的是用户预屏幕的这条看不见的垂直线。层叠水平即stacking level，决定了一同一个层叠上下文中元素在z轴上的显示顺序。普通层叠水平优先级由层叠上下文决定，它只有在当前层叠上下文元素中才有意义。只有定位元素以及flex盒子的孩子元素，z-index才影响层叠水平。

　　层叠顺序即starking order，表示元素发生层叠时有着特定的垂直显示顺序。层叠上下文和层叠水平是概念，层叠顺序是规则。先不考虑css3从高到低：

１.正index

２.z-index:auto也可把z-index:0看成一样(但从层叠水平上看，实际上在层叠上下问领域有着本质差别)

３.inline/inline-block水平盒子

４.float浮动盒子

５.block块状水平盒子

６.负z-index

７.background/border

　　其本质是按照内容、布局、装饰的顺序。

　　黄金准则：1.在同一个层叠上下文领域，层叠水平大的那个一覆盖小的哪一个。2.当元素的层叠水平一致、层叠顺序都相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

　　层叠上下文特性：1.层叠上下文的层叠水平要比普通元素高2.层叠上下文可以阻断元素的混合模式3.层叠上下文可以嵌套，内部层叠上下文以及其所有子元素均手纸于外部的层叠上下文4.每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或者渲染的时候，只需要考虑后代元素。5.每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

　　层叠上下文的创建：1.页面根元素天生具有层叠上下文，称之“根层叠上下文”。2.z-index值为数值的定位元素的传统层叠上下文。3.其他css3属性。1.根层叠上下文：指的是页面根元素，也就是html，这就是为什么绝对定位的元素在left/top等值定位时，如果没有其他定位元素限制，会相对浏览器的窗口定位的原因。2.对于包含有position：relative、position：absolute的定位元素（不包含chrome等webkit内核浏览器）下含有position：fixed声明的定位元素，当其z-index值不是auto时，会创建上下文。

　　z-index:0所在的div元素是层叠上下文元素，而z-index:auto所在的div是一个普通的元素。当为普通元素时两张图片的层叠比较就不受到父级影响，谁的z-index大就会在上面。当z-index为数值时，哪怕是0，都会创建一个层叠上下文，两张图片的顺序比较变成了优先比较其父级的上下文层叠顺序，由于都是z-index=0，层叠顺序一样大，所以后来居上。如果在网页中发现z-index错乱，可以看一下是不是受到了父级层叠上下文元素干扰。在过去position:fixed和relative/absolute表现一样，都需要z-index才行，但是现在chrome等webkit内核，position：fixed元素天生层叠上下文无需z-index，但是IE和firefox仍是需要z-index。

　　css3中的新的层叠上下文：

１.z-index值不为auto的flex项（父元素display：flex|inline-flex）

２.元素的opacity不是1

３.元素的transform值不是none

４.元素mix-blend-mode值不是normal

５.元素filter值不是none

６.元素的isolation值是isolate

７.will-change指定的属性值为上面任意一个

８.元素的-webkit-overflow-scrolling设为touch

　　详解：1.display：flex|inline-flex与层叠上下文：条件1是父级需要是display：flex或者display：inline-flex水平，条件2是元素的z-index不是auto

负值z-index的层叠顺序在当前第一个父层叠上下文元素的上面，z-index值为1的蓝色背景的父元素的display值是flex，就变成层叠上下文元素。在css3之前，z-index必须和定位元素一起使用才有作用，但是，在css3的世界里，非定位元素也能和z-index一起使用。

　　层叠上下文与层叠顺序：1.如果层叠上下文元素不依赖z-index数据，则其层叠顺序是z-index：auto可看成z:index：0级别2.如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定

3.常见问题

　　为什么定位元素会层叠在普通元素的上面

4.解决方案

　　根本原因在于，元素一旦成为定位元素，其z-index就会自动生效，此时其z-index也就是默认的auto，也就是0级别，就会覆盖inline或block或float。而不支持z-index的层叠上下文元素和定位元素是一个层叠的，于是当他们发生层叠时，遵循后来居上的准则

5.编码实战

6.扩展思考

　　如何利用这些特性

7.参考文献

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

8.更多讨论

　　如何利用这些特性