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

Question

I am trying to place my leftbody and rightbody over top of my MidBody but it doesnt seem to work. I thought placing the Midbody to relative and the left and right bodies to absolute with a z-index would help but it doesnt. So i am clueless right now. Any help would be greatly appreciated.

 .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

I changed

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

and

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

Final 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

Use position: fixed; instead of position: absolute;