如何将一个div与另一个重叠？

Question

I have 3 panels(top, lower 1 and lower 2). What i want to achieve is, top panel should be above lower 1 and lower 1 should be above lower 2. I am new to css and bootstrap and what i understood is the div with higher z-index lies above another div with lower z-index.

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

Here is the JS fiddle https://jsfiddle.net/

Answer 1

Do as I did... See 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

take a look in this link http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

it all done by position and z-index

Answer 3

In your example three panels go one after another. If you want to see how panels overlap write something like that:

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