Pa3k.m Pa3k.m - 2 months ago 5
CSS Question

How do I make it so that an absolute child is behind a fixed parent?

I have a fixed header that shows a child when a button is clicked. I made it as hover on the jsfiddle to make it simpler, but if you do so, you can see that the child is on top of the parent. Is there anything I can do to make it show behind instead?

Also, I need the parent to have a

z-index
Fiddle



#parent {
width: 100%;
height: 50px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
#child {
width: 100%;
height: 200px;
background: #000;
position: absolute;
top: -200px;
left: 0;
z-index: -1;
transition: 0.2s;
}
#parent:hover #child {
top: 50px;
}

<div id="parent">Hover me
<div id="child">
</div>
</div>




Answer

You need to have a wrapper around the elements so you can play with the z-index. See below or view this JSFiddle.

#parent {
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

#child {
  width: 100%;
  height: 200px;
  background: #000;
  position: absolute;
  top: -200px;
  left: 0;
  z-index: -1;
  transition: 0.2s;
}

#parent:hover #child {
  top: 50px;
}

.wrapper {
  z-index:0;
  position:fixed;
  width:100%;
  top:0;
}
<div class="wrapper">
  <div id="parent">Hover me
    <div id="child">
    </div>
  </div>
</div>

Comments