Question

我要求我的页面内容介于标题和徽标之间（即标题图片上方和徽标图片下方）。

//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＆gt;内容）或更高标题（标题z-index＆lt; content）下方。不符合我的要求。我已将标题，徽标和内容的z-index值设置为1000,1004和1002 resp。我认为标题div（父）z-index覆盖了logo（子）z-index值。所以它低于或高于标题

请提出任何建议。

Answer 1

首先，你错过了一个选择器.并允许z-indexing你必须明确地定义位置：

  .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*/
}

Answer 2

希望你从这段代码中了解

＆＃13;

.header {
    position:fixed;
    width:50px;
    height:50px;
    z-index: -1;
    background-color:red;
    left:20px;
    top:20px;
}

.logo {
    position:fixed;
    width:50px;
    height:50px;
    z-index: +5;
    background-color:green;
    left:60px;
    top:60px;
}

.content {
    position:fixed;
    width:50px;
    height:50px;
    z-index: +2;
    background-color:blue;
    left:40px;
    top:40px;
}

＆＃13;

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

＆＃13;

子项的z-index由父项覆盖

2 个答案: