为什么 z-index 不起作用？

Question

我有简单的 html 和 css 代码：

HTML:

<div class="header">
    <div class="tip"></div>
</div>

CSS:

.header {
    display: block;
    width: 260px;
    min-height: 222px;
    background-color: #252525;
    position: relative;
    z-index: 5;
    -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;

}

我只想在.tip块下.header块。但是现在看起来是这样的，尽管 .tip 的 z-index 小于 .header 的 z-index：

这就是我想要的：

出于某种原因，z-index 不起作用。我有必要在 .header 块上设置 z-index，因为我在页面上还有另一个块也有 z-index

Answer 1

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

.header {
    display: block;
    width: 260px;
    min-height: 222px;
    background-color: #252525;
    position: relative;
    /*z-index: 5;*/
    -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;
}

<div class="header">
    <div class="tip"></div>
</div>

Answer 2

尝试将 1 更改为 -1...并删除第一个块中的 z-index: 5 (header)；看一下这部分代码：

.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;

}

为什么 z-index 不起作用？

Why z-index doesnt work?

html

css

position

z-index