CSS中设置层叠顺序

一、简介

Z-index属性决定了一个html元素的层叠级别。
元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。
一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
1、属性作用
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。


2、适用范围



z-index属性只能在设置了position:relative |absolute |fixed的元素和父元素设置了 display:flex属性的子元素中起作用，在其他元素中是不作用的。




1、同级元素之间



① 两个设置了定位且z-index属性值不同的同级元素


       他们之间的层级，由z-index属性值决定，属性值大的，层级高，显示在前面。

②两个设置了定位且z-index属性值相同的同级元素


      由于z-index属性值相同，所以他们之间的层级，由元素的书写顺序决定，后面的元素会覆盖在前面的元素上面。

2、父子元素之间



① 父元素未设置z-index属性，子元素设置了z-index属性


      当子元素的z-index属性值大于等于 0 时，子元素的层级会高于父元素的层级，而当子元素的z-index属性值小于 0 时，子元素的层级会低于父元素的层级

② 父元素设置了z-index属性，子元素未设置z-index属性

       在这种情况下，无论父元素的z-index属性值为多少，子元素的层级永远高于父元素，子元素永远会挡住父元素的内容