0

I have a 'header' div with a 'body' div underneath the header (in terms of y and z). The body has two children, which are to be position: relative and floated. One child must be below the header and the child must be above the header - but I can't get it above the header. I've read about using a negative z-index value for position: relative, but I can't seem to get it to work. Here's my code:

#header {
position: absolute;
left: 50px;
height: 50px;
width: 200px;
background-color: rgba(211,141,154,1);
z-index: 2;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 1);
}

#body {
position: absolute;
top: 55px;
height: 50px;
width: 300px;
background-color: rgba(250,250,250,1);
z-index: 0;
}
#child_below {
position: relative;
float: left;
left: 70px;
top: 0px;
height: 50px;
width: 50px;
background-color: rgba(160,210,250,1);
z-index: 1;
margin-right: 10px;
}
#child_above {
position: relative;
float: left;
left: 100px;
top: 0px;
height: 50px;
width: 50px;
background-color: rgba(160,210,250,1);
z-index: 3;
}
<div id="header">header</div>
<div id="body">
  <div id="child_below">child below</div>
  <div id="child_above">child above</div>
</div>
Normajean
  • 1,075
  • 3
  • 11
  • 28

0 Answers0