CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Naveen Kumar
Naveen Kumar

Reputation: 1616

how to overlap one div on another?

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/

Upvotes: 0

Views: 1517

Answers (3)

Mifort
Mifort

Reputation: 267

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>

Upvotes: 0

Sohail Khan
Sohail Khan

Reputation: 69

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>

Upvotes: 2

Ajay
Ajay

Reputation: 196

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

it all done by position and z-index

Upvotes: 0

Related Questions