CSS 图层叠放顺序的方法详解

一、基础概念

CSS图层叠放顺序是指多个元素在同一位置时的层叠次序，也是CSS中一项很重要的知识点。当多个元素发生重叠时，哪个元素会显示在上面取决于元素的层级关系和设置的层级。

二、Z-index——掌握层叠方式

CSS中的Z-index属性用于设置层叠元素的层级顺序，其值越大，层级越高，也就越靠近画布的顶部。

/*设置一个z-index为1的层叠元素*/
.stacked-element {
    position: absolute;
    z-index: 1;
}

需要注意的是，z-index只对定位元素有效。如果元素没有应用定位属性，如position:relative或position:absolute，z-index设置将不起任何作用。

三、在父级容器中控制子级元素

有时我们需要设置子元素在父级容器中的层级顺序，除了对子元素应用position属性的方式设置z-index外，我们也可以直接在父级容器中设置元素层级。

/*设置子元素的z-index为1*/
.parent {
    position: relative;
}
.child {
    position: absolute;
    z-index: 1;
}

在上述代码中，我们把子元素的z-index设置为1，而父级容器中未设置z-index属性值，这样子元素可以优先于其他元素显示出来。

四、使用透明度来控制层叠显示

透明度也可以用来控制层叠显示，元素的透明度越高，越能透过它下面的其他元素。

/*设置一个透明度为50%的层叠元素*/
.stacked-element {
    opacity: 0.5;
}

需要注意的是，透明度不会改变元素自身的层叠级别，即使一个完全透明的元素也仍然会在更高的层次上呈现自己而不受其他元素的压制。

五、使用z-index和负值元素进行控制

我们可以使用z-index结合负值元素，控制层叠元素的显示顺序，尽管这种方式不太容易理解，但在特定的情况下，最有效。

/*通过z-index结合负值元素设置层级*/
.higher-element {
    position: relative;
    z-index: 2; 
}
.lower-element {
    position: relative;
    z-index: 1; 
}
.negative-element {
    position: absolute;
    z-index: -1;
}

在上述代码中，.higher-element和.lower-element都是定位元素，当它们叠在一起时，会影响层级。我们创建了一个透明的.negtive-element，并将其嵌套在.higher-element和.lower-element元素里，设置z-index为-1，这样无论是.higher-element还是.lower-element都被.negtive-element所压制，因为它们拥有更高的层级。

六、使用!important规则强制指定

有时候，我们可以使用!important规则去强制指定CSS属性的值，虽然不太优美，但是在某些情况下可以达到效果。

/*使用!important规则强制指定z-index的值*/
.stacked-element {
    position: absolute;
    z-index: 3!important;
}

需要注意的是，!important不必然总是正确，只有在最后的手段中使用，当其他方法都失败时，才应该考虑使用他。

七、总结

以上是掌握CSS 图层叠放顺序的方法，我们可以基于应用场景选择合适的方法，从而达到最佳的层叠效果。