Z-index 是css 网页样式中的一个属性，用于控制元素在页面上的层叠顺序：z-index 值越高表示元素位于更上层级。正整数使元素位于其父元素或兄弟元素的前面。负整数使元素位于其父元素或兄弟元素的后面。

z-index：层叠顺序控制

z-index是一个CSS属性，用于控制元素在页面上的层叠顺序。它定义了元素相对于其父元素或其他兄弟元素的前后位置。

作用

当多个元素重叠时，z-index决定哪个元素位于最前面。较高的z-index值表示元素位于更前面的层级。

取值

z-index可以取正整数（大于或等于0）或负整数（小于0）。

正整数：元素位于其父元素或兄弟元素的前面。

负整数：元素位于其父元素或兄弟元素的后面。

0：元素位于其父元素或兄弟元素的平面上。

如上图所示，这里有一个z-index:100的CSS属性设置，但是该属性应用到网页时，效果没有体现出来，Z-index失效。通过F12查看代码，发现z-index属性为灰色，且其后方有个感叹号！

原因分析：

z-index仅在包含定位的元素时起作用，例如position: absolute或position: relative，在position:static时是不起作用的。

嵌套元素的z-index值无效，除非父元素也具有定位。

具有透明背景的元素在其z-index值大于幕后元素时，可能无法完全覆盖幕后元素。

如果有多个元素具有相同的z-index值，则浏览器的渲染引擎将决定显示顺序

解决方法：修改Css样式文件，将元素的position属性设置为relative