Z-Index与兄弟姐妹的孩子

Question

如果我有

<div class="above-header">SOME STUFF</div>
<header>
    <div class="inside-header">SOME MORE STUFF</div>
</header>

且inside-header position: absolute为z-index: 1，above-header为position: relative z-index: 10，为什么inside-header出现在上方above-header？

Answer 1

因为.inside-header是标题的子节点，并且在标题中位于绝对位置。所以你需要制作标题位置：绝对的z-index：1