如何將div放在其他div上？

我想把我的左身和右身放在我的MidBody之上，但它似乎不起作用。我認爲將Midbody放置在相對位置，將左右兩個物體放置到絕對位置，這對Z-index有幫助，但它不會。所以我現在無能爲力。任何幫助將不勝感激。如何將div放在其他div上？

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

來源

2016-03-12 Derek Edwards

似乎是一個顯示：彎曲;工作:)如果你的意思是在 –

之前排名靠前，那還是。我究竟會在哪裏放置該元素？ –

這不是元素，這是顯示。但絕對不應該在這裏使用，除非你想在同一領域的對方頂部的元素，你能否澄清（我的英語不太好）） –

我改變

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>

來源

2016-03-12 15:48:05

非常感謝。完美的作品！ –

使用position: fixed;而不是position: absolute;

來源

2016-03-12 15:43:38

我也嘗試過，它似乎沒有工作。 –

如何將div放在其他div上？

回答

相關問題