How to overlap three divs using CSS?

css overlapping divs
overlapping div on top of another

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>

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>

Z-Index Explained: How to Stack Elements Using CSS, context. For more information on z-index, I recommend this article. Answer: Use the CSS z-index Property. You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute, fixed, or relative ).

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>

How to make 3 elements overlap each other with CSS, fake-foobar inside .bar so that it looks like the corner of .foobar . <div class=  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

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

Stacking context example 3, If the three menu levels partially overlap, then managing stacking could and third level menus are made of several DIVs contained in an  By adding margin-left you can make sure that long fixed div doesn't overlap the others. 2: Adding the bottom:0px; makes it the height of the window because it expands from the top to the bottom. Note: I also added a flexible width of 20% to the #one div so that it plays nicely with the other two flexible width divs.

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

How to Stack Elements in CSS, you will eventually need two elements to overlap or exist in the same place. You. a navigation that you always want in the top-left corner, but a third party <div class="parent"> <h2>Parent</h2> <div class="child child-1">  The position Property. The position property specifies the type of positioning method used for an element. There are five different position values: static; relative; fixed; absolute; sticky; Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

Overlapping Elements with Z-index in CSS, When we decide to use CSS positioning to position the elements ABSOLUTE</​div> <div id="box3" class="relative"> <b>BOX 3</b><br  you need to give them different class names and move one. maybe using position relative or css3 translate – btevfik May 4 '13 at 8:01 Possible duplicate: CSS: Make two floating elements overlap – Siva Charan May 4 '13 at 8:05

How to overlay divs properly? - HTML-CSS, < section > has a background; on top of it theres an overlay div , color yellow The stacking context is a three-dimensional conceptualization of HTML HTML elements occupy this space in priority order based on element. Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div. If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this: or whatever margin you want.

Overlapping Div Layer Tutorial, Overlapping CSS Div Layer Tutorial : How to overlap and float div layer by setting to absolute relative position and css z-index. Unlike HTML table, div layers can be overlapped with each other. The order div layer id "layer2" with z-index 3  By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div. z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.

Comments
  • How to put a click handler so that when I click on any of the divs, it should surface all the way to the top
  • @parvez Try that with a library like jQuery. A little hint: .css()