CSS层叠顺序

介绍

在 CSS 中，元素的层叠顺序决定了当多个元素重叠时（跟布局没有完全的关系，也就是说层叠顺序只会在几个叠放元素上进行比较，而不会改变布局），哪个元素显示在最上面，哪个元素显示在最下面。

默认情况下，元素的层叠顺序是由它们在 HTML 中出现的顺序决定的——后出现的元素会覆盖前面元素的显示区域。但 CSS 提供了多个方式来调整这个顺序，确保元素按照特定的需求进行堆叠。

1. 视觉层叠

在浏览器渲染页面时，如果多个元素的位置发生重叠，浏览器会根据它们的“层叠顺序”来决定哪个元素显示在上面。一般来说，后面的元素会覆盖前面的元素，但我们可以通过调整 z-index、position 等属性来改变这种默认行为。

1. 默认层叠顺序

默认情况下，元素的层叠顺序是根据它们在 DOM 中的位置确定的。一个元素的层叠顺序比它前面的元素要大。如果没有特殊设置，后出现的元素会覆盖先出现的元素。

层叠顺序控制

1. z-index

z-index 控制的是元素的层叠顺序，数值大的元素会显示在数值小的元素上面。z-index 只对定位元素（position：relative | absolute | fixed | sticky）生效。默认情况下 z-index 为 auto , auto 时他们的堆叠顺序是由文档顺序决定。 auto 属性就是计算属性的最终值。设置为 auto 属性的元素在层叠顺序上会相对较弱，会按照文档流层叠。

2. position

position 属性是影响层叠顺序的一个关键因素。只有在元素的 position 属性设置为 relative、absolute、fixed 或 sticky 时，z-index 才会生效。如果一个元素没有设置 position（即默认为 static），那么它的 z-index 就不会生效，元素会根据文档顺序进行显示。

它的层叠只会因为 z-index 而有差别，不会因为是否脱离文档流而提升层叠性。（只有 z-index 相同时才由文档流决定）

3. z-index和堆叠上下文

当一个元素的 position 被设置为 relative 、 absolute、 fixed 或 sticky，并且该元素有一个非 auto 的 z-index 值时，浏览器会创建一个新的堆叠上下文 （stacking context） 。堆叠上下文中的元素的 z-index 值仅在其所在的上下文内有效，而与外部的元素无关。

基本层叠顺序

从下到上依次为：

1. 背景和边框：元素的背景和边框处于最底层。
2. 负 z-index 值元素：z-index 设为负数的定位元素（如 position: relative、position: absolute、position: fixed 或 position: sticky）会位于普通元素之下。
3. 块级元素：普通的块级元素按文档流顺序依次堆叠。
4. 浮动元素：浮动元素会覆盖普通块级元素。
5. 行内元素：行内元素会覆盖浮动元素和块级元素。
6. z-index 为 0 或 auto 的定位元素：定位元素但 z-index 为 0 或者 auto 时，按文档流顺序堆叠在其他元素之上。
7. 正 z-index 值元素：z-index 设为正数的定位元素会位于其他元素之上，z-index 值越大，越处于上层。