javascript - 父项覆盖子项的Z索引

我有一些要求，例如我的页面内容必须介于标题和徽标之间（即，标题图像上方和徽标图像下方）。

//header
<div class="header">Header image
    //logo
    <div class="logo">Logo Image</div>
</div>

//content
<div class="content">
    my page content
</div>

header {
    left: 63.3167px;
    margin-left: 0;
    position: fixed;
    top: 19px;
    width: 1456px;
    z-index: 1000;
}

logo {
    z-index: 1006;
}

content {
    z-index: 1004;
}

当我滚动页面时，内容位于标题图像的下方（header z-index> content）或上方（header z-index 我已将标题，徽标和内容的z-index值分别设置为1000,1004和1002。我认为标头div（父级）z-index会覆盖徽标（子级）z-index值。所以它在标题的下方或上方

请提出任何建议。

最佳答案

首先，您缺少选择器.，并且要允许z索引，必须明确定义位置：

  .header {
  left: 63.3167px;
  margin-left: 0;
  position: fixed;
  top: 19px;
  width: 1456px;
  z-index: 1000;
}

.logo{
  z-index: 1006;
  position: relative;/*or absolute*/
}

.content{
 z-index: 1004;
position: relative;/*or absolute*/
}

关于javascript - 父项覆盖子项的Z索引，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28212150/