z-index属性的理解

简单介绍z-index

什么是z-index？

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

可以这样理解，z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

关于z-index

1. 默认情况下所有的元素都有一个z-index属性，取值为0.

2. 默认情况下定位流的元素会覆盖标准流的元素

3. 默认情况下的定位流的元素后面编写的会盖住前面编写的。

4. 如果定位流元素设置了z-index属性，那么谁的z-index属性值比较大，谁就显示在上面。

如何理解z-index的“从父现象”？

1. 如果两个元素的父元素都没有设置z-index属性，那么谁的Z-index属性大，谁就显示在上面；

2. 如果两个元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性较大谁就会显示在上面。

   
   image.png