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

Question

我试图将我的左撇子和右撇子放在我的MidBody上方，但它似乎无法奏效。我认为将Midbody放在亲戚身上，左右身体用z-index放在绝对位置会有所帮助，但它没有。所以我现在很无能为力。任何帮助将不胜感激。

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

Answer 2

使用position: fixed;代替position: absolute;