`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 中的任何一种即