【修真院小课堂】z-index初解，工作原理

大家好，我是IT修真院武汉分院学员曾健，一枚正直纯洁善良的WEB程序员
今天给大家分享一下，修真院官网前端任务4，深度思考中的知识点——z-index初解，工作原理

一，背景介绍

 1.含义：z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定当元素 发生覆盖的时候，哪个元素在上面。
通常一个较大的z-index值的元素会覆盖较低的那一个（前提是元素支持z-index值）。


2. 2.z-index的值            
 z-index:auto;默认值
 z-index：<integer>;整数值
 z-index：inherit;继承


3.基本特性
支持负值；
支持css3animation动画；
在css2.1时代，需要和定位元素配合使用；


二.知识剖析
1.z-index一般只对定位元素有作用

如图position：static是不起任何作用的

2.如果定位元素z-index没有发生嵌套，则遵循两个原则
 后来居上准则：
HTML的dom流是分先后顺序的，一般来讲两个元素他们的css特性基本没什么差别的时候，当发生重叠的时候，一般是由后面
一个覆盖前面一个。
谁大谁上：
这个很好理解，谁的z-index值大，谁就在上面


3.如果定位元素z-index发生嵌套，也有一个原则

祖先优先原则：

如图，这里的子元素z-index完全是看父级z-index的大小

三.常见问题
为什么z-index为auto，祖先优先原则就不起作用了？

四.解决方案

官方文档规定当z-index为auto的时候，盒子不会创建一个新的层叠上下文。

五.编码实战


六.拓展思考
理解元素的层叠顺序
层叠顺序-stacking-order
表示元素发生层叠的时候有着特定的垂直显示顺序。


著名的7阶层叠水平


七.参考文献
参考一： 深入理解z-index


八.常见问题
1.问：为何需要层叠顺序？
 答：因为层叠顺序的意义就是规范元素重叠时候的呈现规则


2.问：为何是这个层叠顺序？
答：因为这种层叠顺序更符合页面加载的功能和视觉呈现！

3.问：内联元素真的会覆盖浮动元素？

答：如图可以看到

给这张图片设置了float：left，margin-right：-20px，文字覆盖在了图片上，因为文字是inline/inline-block水平元素