CSS深入理解学习笔记之z-index

1、z-index基础

　　z-index含义：指定了元素及其子元素的”z顺序“，而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。

　　z-index值：auto（默认值）；integer（整数值）；inherit（继承）。

　　z-index基本特性：①支持负值；②支持CSS3 animation动画；③在CSS2.1时代，需要和定位元素配合使用。

2、z-index与定位元素

　　z-index值越大越在上面。

　　如果定位元素z-index发生嵌套：祖先优先原则，前提是祖先的z-index值是数值，不是auto

3、层叠上下文与层叠水平

　　层叠上下文：是HTML元素中的一个三维概念，表示元素在z轴上的层叠表现。

　　具有层叠上下文的元素：①页面根元素天生具有层叠上下文，称之为”根层叠上下文“；②z-index值为数值的定位元素也具有层叠上下文；③其他属性

　　层叠水平：层叠上下文的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。层叠水平和z-index不是同一个东西，普通元素也有层叠水平。

　　层叠上下文特性：①层叠上下文可以嵌套，组合成一个分层次的层叠上下文；②每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染的时候，只需要考虑后代元素；③每个层叠上下文是自成体系的，当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

4、层叠顺序

　　含义：元素发生层叠时候有着特定的垂直显示顺序。

　　著名的7阶层叠水平：

　　

5、z-index与层叠上下文

　　⑴ 从层叠顺序上讲，定位元素默认z-index:auto可以看成是z-index:0，但是从层叠上下文来讲，两者却有着本质的差异；

　　⑵ z-index不为auto的元素会创建层叠上下文；

　　⑶ z-index层叠顺序的比较止步于父级层叠上下文。

　　为何定位元素会覆盖普通元素：具有定位属性的元素，z-index值为auto可以看为0，z-index:auto的层叠顺序＞inline水平盒子。

　　z-index与创建层叠上下文：z-index不是auto的情况下，元素会创建层叠上下文。（IE8+）

　　z-index受限于层叠上下文：父元素z-index为数值的情况下，会优先展现层叠顺序。

6、其他属性与层叠上下文

　　其他参与层叠上下文的属性：①z-index值不为auto的flex项（父元素display:flex|inline-flex）；②元素的opacity值不是1；③元素的transform值不是none；④元素mix-blend-mode值不是normal；⑤元素的filter值不是none；⑥元素的isolation值是isolate；⑦position:fix声明；⑧will-change指定的属性值为上面任意一个；⑨元素的-webkit-overflow-scrolling设为touch。

7、z-index与其他属性层叠上下文

　　不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别：

　　

　　依赖z-index的层叠上下文的层叠顺序却决于z-index值。

8、z-index相关实践分享

　　最小化影响原则：

　　

　　不犯二准则：

　　

　　组件层级计数器：

　　

　　通过JS获得body下子元素的最大z-index值。

　　负值z-index与可访问性隐藏：

　　　　可访问性隐藏：人肉眼不可见，但是辅助设备可以识别。

　　　　

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有