How to overlap three divs using CSS?

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>

4 Answers
4

Add a z-index like so:

z-index

.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

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:

z-index

.click()

.box

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>

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

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;



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy