z-index的理解

`z-index` 属性用于控制元素在 Z 轴方向上的层级关系，即用于控制元素的遮盖关系;

其值越大，则元素越靠近用户，越可能遮挡其它元素。 

需要注意的是，要让z-index生效，以下两个条件必须满足：

1. 元素必须被定位，即有 position 属性，通常为 `position: relative/absolute/fixed/sticky`。

2. 元素必须是非 static 定位（ static 是默认定位）。

另外需要注意的是，如果两个元素在同一层级上，它们都没有设置 `z-index`，那么它们在显示优先级上仍然是根据在文档流中的先后顺序（后添加的覆盖先添加的）。

还有一点需要注意的是，用 `z-index` 调整元素层级的时候，不要随意指定过高的数值，要兼顾性能和效果，虽然 `z-index` 好像可以接受无限大的正整数值，但是在实际开发中应尽量避免超过实际需要的取值范围。

`z-index` 属性只在元素被定位（position 属性为 relative、absolute、fixed 或 sticky）时才生效，对于普通文档流中的元素是不起作用的。

什么是普通的文档流？

文档流指的是HTML文档中元素在没有定位的情况下所占据的位置。

普通的文档流（也叫“常规流”或“正常流”）是指元素按照其在HTML标记中的先后顺序依次排列，从上至下、从左至右依次显示，并且元素之间在垂直方向上默认有一定的间距。

这种布局方式是由浏览器自动完成的，它是网页布局的基础。

当元素不设置position属性（或设置为static）和float属性，以及不使用z-index属性进行定位时，元素在页面中的位置就会遵循文档流。

如果元素的 position 属性被设置为 static，则 `z-index` 属性将失效，并且该元素将显示在默认布局中的正确位置。

如果要使用 `z-index` 属性来控制元素的层级关系，则需要将元素的 position 属性设置为除 static 以外的值。例如，将 position 设置为 relative，这将使元素处于默认的流动文档中（不会删除元素或使其脱离常规文档流程）。这样设置后，你可以使用 `z-index` 属性来调整元素的遮挡关系。

所以，如果需要使用 `z-index` 控制元素的层级关系，那么将元素的 position 属性设置为 relative、absolute、fixed 或 sticky 中的任何一种即