CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Magnotta
Magnotta

Reputation: 941

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>

Upvotes: 0

Views: 1569

Answers (4)

VXp
VXp

Reputation: 12058

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>

Upvotes: 1

mariamelior
mariamelior

Reputation: 91

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;
}

Upvotes: 0

user223321
user223321

Reputation: 153

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

Upvotes: 0

Ron van der Heijden
Ron van der Heijden

Reputation: 15070

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

Upvotes: 7

Related Questions