html - 为什么 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 block 放在 .header block 下。但是现在看起来是这样的，虽然 .tip 的 z-index 小于 .header 的 z-index:

这就是我想要的:

出于某种原因，z-index 不起作用。我有必要在 .header block 上设置 z-index，因为我在页面上还有另一个 block 也有 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>