z-index of child override by parent

Question

I have requirement like my page content goes between header and logo(ie above header image and below logo image).

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

When I scroll the page, content goes either below (header z-index > content) or above(header z-index < content) the header image.Not meet my requirement. I have set z-index value of header,logo and content as 1000,1004 and 1002 resp. I think header div(parent) z-index overrides logo(child) z-index value. So it goes either below or above header

Any suggestion please.

Answer 1

First of all you're missing a selector . and to allow z-indexing you must explictly define the position:

  .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

Hope you got the understand from this code snaps

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

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