@panhonhang
2018-08-06T17:38:14.000000Z
字数 1490
阅读 680
css
在w3school上面对于z-index属性的介绍是这样的：
定义和用法：
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明：
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
详情参考：CSS z-index属性
然后我们来看一下在实际使用中可能遇到的情况：
正常流情况：
1.当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来。
2.如果两个元素是块级元素，后一个元素比前一个元素层级高，文字比背景层级高，文字始终会透上来。
3.如果两个元素都是行内或都是行内块的时候，背景比文字层级高，后一个元素的层级比前一个元素的层级高，如果设置背景的话，后一个元素将透不上来。
4.如果一个为块级元素一个为行内块元素的话，行内块比块级元素层级高，依然是文字比背景层级高。
5.当一个元素是行内块另一个是行内元素时，行内元素层级比行内块元素高，背景比文字层级高。
脱离文档流情况：
1.两个都为浮动的话，后一个比前一个层级高。
2.一个为浮动一个为块元素的话，浮动层级高。
3.一个为浮动和一个为行内块元素的话，行内块层级高。
4.一个为浮动和一个为行内元素的话，行内元素层级高。
5.两个元素都是定位的话，后一个元素层级高。
6.定位比所有元素层级高。
总结如下：
小于0的z-index < 块 < 浮动 < 行内块 < 行内 < 定位 < 大于0的z-index.
堆叠上下文：
具有共同父级的元素组在堆叠顺序中一起向前或向后移动构成了所谓的堆叠上下文。完全理解堆叠上下文是真正掌握z-index和堆叠顺序如何工作的关键。
每个堆栈上下文都有一个HTML元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制在堆叠顺序中的特定位置。这意味着如果元素包含在堆叠顺序底部的堆叠上下文中，则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面，即使是z-index十亿！需要注意的是，千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。
可以通过以下三种方式之一在元素上形成新的堆叠上下文：
1.当元素是文档的根元素（ html 元素）时。
指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。
2.当元素的位置值不是static和z-index值以外的值时auto。
对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。
3.当元素的不透明度值小于 1。
opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index:auto级别，跟没有z-index值的absolute绝对定位元素是平起平坐的。