Html 为什么z指数不起作用？

我有简单的html和css代码：

HTML:

我只想

。提示

块在

头

块下。 但是现在看起来是这样的，尽管

.tip

的z索引小于

.header

的z索引：

这就是我想要的：

由于某种原因，z索引不起作用。

---

我有必要在

.header

块上设置z-index，因为页面上还有另一个块也有z-index

要使父元素的子元素的z-index高于父元素，请删除父元素的z-index值

.header{
显示：块；
宽度：260px；
最小高度：222px；
背景色：#252525；
位置：相对位置；
/*z指数：5*/
-网络工具包盒阴影：0 0 5px#000；
-moz盒阴影：0 0 5px#000；
盒影：0 0 5px#000；
边界半径：2px；
}
.提示{
显示：内联块；
宽度：10px；
高度：10px；
右：11px；
顶部：-5px；
变换：旋转（45度）；
位置：绝对位置；
z指数：-1；
背景色：红色；
-网络工具包盒阴影：0 0 5px#000；
-moz盒阴影：0 0 5px#000；
盒影：0 0 5px#000；
}

---

要使父元素的子元素的z索引高于父元素，请删除父元素的z索引值

.header{
显示：块；
宽度：260px；
最小高度：222px；
背景色：#252525；
位置：相对位置；
/*z指数：5*/
-网络工具包盒阴影：0 0 5px#000；
-moz盒阴影：0 0 5px#000；
盒影：0 0 5px#000；
边界半径：2px；
}
.提示{
显示：内联块；
宽度：10px；
高度：10px；
右：11px；
顶部：-5px；
变换：旋转（45度）；
位置：绝对位置；
z指数：-1；
背景色：红色；
-网络工具包盒阴影：0 0 5px#000；
-moz盒阴影：0 0 5px#000；
盒影：0 0 5px#000；
}

---

尝试将1更改为-1…并删除第一个块（标题）中的z-index:5；看看这部分代码：

.header {
    display: block;
    width: 260px;
    min-height: 222px;
    background-color: #252525;
    position: relative;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    border-radius: 2px;
}

.tip {
    display: inline-block;
    width: 10px;
    height: 10px;
    right: 11px;
    top: -5px;
    transform: rotateZ(45deg);
    position: absolute;
    z-index: -1;
    background-color: red;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;

}

---

尝试将1更改为-1…并删除第一个块（标题）中的z-index:5；看看这部分代码：

.header {
    display: block;
    width: 260px;
    min-height: 222px;
    background-color: #252525;
    position: relative;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    border-radius: 2px;
}

.tip {
    display: inline-block;
    width: 10px;
    height: 10px;
    right: 11px;
    top: -5px;
    transform: rotateZ(45deg);
    position: absolute;
    z-index: -1;
    background-color: red;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;

}

---

是的，它可以工作，但我有必要在.header上设置z-indexblock@ZhekaVasil在这种情况下，您可能无法单独使用z索引来实现这一点。具有z索引的元素将开始新的堆叠顺序，因此子元素将始终以其父元素的堆叠顺序开始。可能可以执行您试图执行的任何操作，但我们需要查看您的完整代码以尝试找到解决方法。感谢您的解释，现在我明白了是的，它可以工作，但我必须在.header上设置z-indexblock@ZhekaVasil在这种情况下，您可能无法单独使用z索引来实现这一点。具有z索引的元素将开始新的堆叠顺序，因此子元素将始终以其父元素的堆叠顺序开始。可能可以执行您试图执行的任何操作，但我们需要查看您的完整代码以尝试找到解决方法。感谢您的解释，现在我知道它工作得很好，但我有必要在.header块上设置z-index，因为我在页面上有另一个块具有z-index，它工作得很好，但我有必要在.header块上设置z-index，因为页面上还有另一个块也有z-index

.header {
    display: block;
    width: 260px;
    min-height: 222px;
    background-color: #252525;
    position: relative;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    border-radius: 2px;
}

.tip {
    display: inline-block;
    width: 10px;
    height: 10px;
    right: 11px;
    top: -5px;
    transform: rotateZ(45deg);
    position: absolute;
    z-index: -1;
    background-color: red;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;

}