如何使用CSS重叠三个div？

Question

I came across a problem in which I need to make something like this:

I'm stuck on CSS

Also when I click on any of the divs, it should surface all the way to the top.

 .boxwrap{ margin-left: auto; margin-right: auto; top: 50px; } .box{ width: 100px; height: 100px; } #box1{ margin-left: -100px; background-color: red; } #box2{ margin-top: -50px; margin-bottom: -50px; margin-left: 0px; background-color: black; } #box3{ margin-left: 100px; background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div align="center" class="boxwrap"> <div class="box" id="box1"> </div> <div class="box" id="box2"> </div> <div class="box" id="box3"> </div> </div> 

Answer 1

Add a z-index like so:

 .boxwrap{ margin-left: auto; margin-right: auto; top: 50px; } .box{ width: 100px; height: 100px; } #box1{ margin-left: -100px; background-color: red; position: relative; z-index: 2; } #box2{ margin-top: -50px; margin-bottom: -50px; margin-left: 0px; background-color: black; position: relative; z-index: 1; } #box3{ margin-left: 100px; background-color: green; position: relative; z-index: 2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div align="center" class="boxwrap"> <div class="box" id="box1"> </div> <div class="box" id="box2"> </div> <div class="box" id="box3"> </div> </div> 

Note: z-index only works on positioned elements

Answer 2

The only way to make it work is to constantly increment the z-index value on each .click() on any .box , this way it won't come to any overlapping changes of the others:

 var z = 2; /* needs to be at least 2, to be 1 above the other two if clicked on the black one for as the first click */ $('.box').click(function(){ $(this).css('z-index', z++); }); 

 .boxwrap { margin-left: auto; margin-right: auto; top: 50px; } .box { width: 100px; height: 100px; position: relative; /* or "absolute", "fixed" */ } #box1 { margin-left: -100px; background-color: red; z-index: 1; /* 1 more than the black one with the default 0 */ } #box2 { margin-top: -50px; margin-bottom: -50px; margin-left: 0px; background-color: black; /* here the "z-index" mustn't be negative, because you won't be able to click on it, better the put the other two 1 level/layer higher */ } #box3 { margin-left: 100px; background-color: green; z-index: 1; /* same here */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div align="center" class="boxwrap"> <div class="box" id="box1"> </div> <div class="box" id="box2"> </div> <div class="box" id="box3"> </div> </div> 

Answer 3

Set property position on .box

 .box{
  width: 100px;
  height: 100px;
  position: relative;
}

and add property z-index: 1 for upper elements, and z-index:0 for lower elements

 #box1{
  margin-left: -100px;
  background-color: red;
  z-index: 1;
}

 #box2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  z-index: 0;
}

 #box3{
  margin-left: 100px;
  background-color: green;
  z-index: 1;
}

Answer 4

 .boxwrap{ margin-left: auto; margin-right: auto; top: 50px; } .box{ width: 100px; height: 100px; } #box1{ margin-left: -100px; background-color: red; display:inline-block } #box2{ margin-top: -50px; margin-bottom: -50px; margin-left: 0px; background-color: black; } #box3{ margin-left: 100px; background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div align="center" class="boxwrap"> <div class="box" id="box1"> </div> <div class="box" id="box2"> </div> <div class="box" id="box3"> </div> </div>