z-index属性无法正常按预期工作？

z-index属性的作用是用于控制元素的堆叠顺序。然而有时候会出现z-index无效的情况，这可能是因为以下原因：

1. 没有为元素设置定位属性，如position:relative或position:absolute。
2. 元素没有堆叠上下文，这可能是因为父元素的z-index属性被设置为auto，而不是其他值。
3. 元素的z-index值被其他元素所覆盖。

以下代码演示了z-index属性的使用：

HTML部分：

<div class="container">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
   <div class="box box3">Box 3</div>
</div>

CSS部分：

.container {
   position: relative;
}

.box {
   position: absolute;
   width: 100px;
   height: 100px;
}

.box1 {
   background: red;
   z-index: 3;
}

.box2 {
   background: blue;
   z-index: 2;
}

.box3 {
   background: green;
   z-index: 1;
}

上述代码表示，红色的box1元素在最上层并覆盖其他元素，蓝色的box2在中间，绿色的box3在最下层。

如果您仍然无法解决z-index无效的问题，请检查是否存在其他元素或CSS属性干扰了该属性。