html - 如何将 div 放在其他 div 之上？

Question

我试图将我的左身和右身放在我的 MidBody 之上，但它似乎不起作用。我认为使用 z-index 将 Midbody 放置到 relative 并将左右 body 放置到 absolute 会有所帮助，但事实并非如此。所以我现在一无所知。任何帮助将不胜感激。

    .Header {
      background-color: #CCCCCC;
      width: calc(100%-16px);
      height: 100px;
      border-radius: 5px;
    }
    .MidBody {
      background-color: #141414;
      width: calc(100%-16px);
      height: 850px;
      margin-top: 3px;
      border-radius: 5px;
      position: relative;
    }
    .footer {
      background-color: #CCCCCC;
      width: calc(100%-16px);
      height: 50px;
      margin-top: 5px;
      border-radius: 5px;
    }
    #leftbody {
      background-color: #F1F1F1;
      width: calc(50%-16px);
      height: 425px;
      float: left;
      margin-left: 3px;
      position: absolute;
      z-index: 1;
    }
    #rightbody {
      background-color: #F1F1F1;
      width: calc(50%-16px);
      height: 425px;
      float: right;
      position: absolute;
      z-index: 1;
    }

<div class="Header"></div>
<div class="MidBody">
  <div id="leftbody"></div>
  <div id="rightbody"></div>
</div>
<div class="footer"></div>

Answer 1

我变了

float:left;  ->  left:0;
float:right;  ->  right:0;

和

width:calc(50%-16px);  ->   width:50%;

最终 CSS :

.Header {
background-color:#CCCCCC;
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
}

.MidBody {
background-color:#141414;
width: calc(100%-16px);
height: 850px;
margin-top:3px;
border-radius: 5px;
position: relative;

}

.footer {
background-color:#CCCCCC;
width:calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;

}

#leftbody {
background-color:#F1F1F1;
width:50%;
height:425px;
left:0;
margin-left: 3px;
position: absolute;
z-index: 9999;
}

#rightbody {
background-color:#F1F1F1;
width:50%;
height:425px;
right:0;
position: absolute;
z-index: 9999;
}

<div class="Header"></div>
<div class="MidBody">
  <div id="leftbody"></div>
  <div id="rightbody"></div>
</div>
<div class="footer"></div>