CSS 中的 z-index 属性是用来控制元素的堆叠顺序的。它决定了元素在页面上的相对位置，如果设置了一个元素的 z-index 值，那么它将会比其他未设置 z-index 值的元素优先显示。
但是，有时候 z-index 属性可能不起作用，那么在什么情况下会失效呢？
1.元素未定位
首先，如果一个元素未定位，它的 z-index 属性将不起作用。z-index 属性只对定位元素（position 属性设置为 absolute、fixed 或 relative）有效。因此，如果您希望使用 z-index 属性，请确保将该元素的 position 属性设置为 absolute、fixed 或 relative。
2.父元素未定位
此外，如果您希望控制一个元素的 z-index 值，该元素的父元素也必须是一个定位元素。如果父元素未定位，那么其子元素的 z-index 属性将不起作用。
3.元素浮动
如果一个元素被浮动，它的 z-index 属性也将不起作用。浮动元素的行为与定位元素的行为不同，因此该元素的 z-index 值将不受控制。如果您希望使用 z-index 属性，请确保该元素未被浮动。
4.元素未展示
如果一个
元素未展示（例如 display 属性设置为 none），那么它的 z-index 属性也将不起作用。因此，如果您希望使用 z-index 属性，请确保该元素是可见的。
5.z-index 值相同
如果两个元素的 z-index 值相同，那么它们的相对顺序将由它们在 HTML 代码中的顺序决定。因此，如果您希望两个元素具有不同的相对顺序，请确保它们的 z-index 值不同。
6.负值 z-index
最后，请注意，z-index 属性只能接受非负值。如果您为一个元素设置了负 z-index 值，那么该元素将不会被显示在页面的顶部。
总结
z-index 属性是一个有用的工具，可以控制元素在页面上的相对位置。然而，如果元素未定位，父元素未定位，元素被浮动，元素未展示或 z-index 值相同，那么 z-index 属性将不起作用。因此，请确保您的元素符合上述条件，以确保 z-index 属性正常工作。
以下是一个使用 z-index 属性的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: #ddd;
}
.box1 {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<p>
<p></p>
<p></p>
</p>
</body>
</html>该代码中，有两个元素，分别是 .box1 和 .box2。两个元素都具有绝对定位，并且分别具有不同的 z-index 值，以控制它们的相对顺序。在这个示例中，.box2 具有更高的 z-index，因此它将显示在 .box1 的上面。同时，请注意，容器元素（即 .container）具有相对定位，这意味着 .box1 和 .box2 的相对位置将相对于 .container 而不是页面。
通过使用 z-index 属性，您可以控制元素的相对位置，使其可以在页面上的正确位置显示。此外，您还可以通过调整 z-index 值来更改元素的相对顺序，以满足您的特定需求。
总之，如果您希望控制元素在页面上的相对位置，那么 z-index 属性是一个非常有用的工具，您应该尝试使用它。只需遵循本文中提到的几个注意事项，以确保 z-index 属性正常工作。