javascript - child 的 z-index 被 parent 覆盖

Question

我的要求是我的页面内容位于页眉和 Logo 之间(即页眉图像上方和 Logo 图像下方)。

//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;
}

当我滚动页面时，内容在标题图像下方(标题 z-index > 内容)或上方(标题 z-index < 内容)。不符合我的要求。我已将标题、 Logo 和内容的 z-index 值分别设置为 1000、1004 和 1002。我认为 header div(parent) z-index 覆盖 logo(child) z-index 值。所以它低于或高于标题

请提出任何建议。

Answer 1

首先，您缺少一个选择器 。 并且要允许 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*/
}