如何重疊一個div在另一個？

Question

我有3個面板（頂部，下部1和下部2）。我想要實現的是，頂部面板應該在1以下，而1應該在2以下。我對css和bootstrap很陌生，我所理解的是z-index較高的div位於另一個div上，z值較低，指數。

#top{ 
 
    width : 300px; 
 
    height: 200px; 
 
    background-color : red; 
 
    margin-left : 20%; 
 
    z-index : 10; 
 
} 
 

 
#lower_2{ 
 
    width : 500px; 
 
    height: 100px; 
 
    background-color : yellow; 
 
    margin-left : 10%; 
 
    z-index : 1; 
 
} 
 

 
#lower_1{ 
 
    width : 400px; 
 
    height: 150px; 
 
    background-color :blue; 
 
    margin-left : 10%; 
 
    z-index : 2; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row" id="row_three"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12"> 
 
    <div class="panel" id="lower_2"> 
 
     <p> lower 2 </p> 
 
    </div> 
 
    <div class="panel" id="lower_1"> 
 
     <p>lower 1</p> 
 
    </div> 
 
    <div class="panel" id="top"> 
 
     <p>top panel 
 
     </p> 
 
    </div>  
 
    </div>    
 
</div>

這裏是JS小提琴https://jsfiddle.net/

Answer 1

待辦事項做的我確實......看到JSFiddle：https://jsfiddle.net/0jpkxnan/

 <style> 
#top{ 
      width : 300px; 
      height: 200px; 
      background-color : red; 
      margin-left : 20%; 
      z-index : 99999; 
      position: absolute; 
     } 

     #lower_2{ 
      width : 500px; 
      height: 100px; 
      background-color : yellow; 
      margin-left : 1%; 
      z-index : 999; 
      position: absolute; 
     } 

     #lower_1{ 
      width : 400px; 
      height: 150px; 
      background-color :blue; 
      margin-left : 10%; 
      z-index : 9999; 
      position: absolute; 
     } 
</style> 

Answer 2

需要在這個環節 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

看看它所有位置的z-index

Answer 3

在你的例子中，三個面板一個接一個。如果你想看到面板如何重疊寫類似的東西：

#top{ 
 
    width : 300px; 
 
    height: 200px; 
 
    background-color : red; 
 
    margin-left : 20%; 
 
    z-index : 10; 
 
    margin-top: -20px; 
 
} 
 

 
#lower_2{ 
 
    width : 500px; 
 
    height: 100px; 
 
    background-color : yellow; 
 
    margin-left : 10%; 
 
    z-index : 1; 
 
} 
 

 
#lower_1{ 
 
    width : 400px; 
 
    height: 150px; 
 
    background-color :blue; 
 
    margin-left : 10%; 
 
    z-index : 2; 
 
}

<div class="row" id="row_three"> 
 
<div class="col-lg-6 col-md-6 col-sm-12"> 
 
<div class="panel" id="lower_2"> 
 
<p> lower 2 </p> 
 
</div> 
 
<div class="panel" id="lower_1"> 
 
<p>lower 1</p> 
 
</div> 
 
<div class="panel" id="top"> 
 
<p>top panel 
 
</p> 
 
</div>  
 
</div>