CODEWITHSUNDEEP
htmlcssz-index
Kimmy
Kimmy

Reputation: 47

How do i overlap boxes using z-index?

I'm new to html and css. I tried to learn about z-index and want to achieve the below output. I wonder if the sample is doable or not.

Sample image

Every time I change the z-index of all boxes, there's always a box that can't be placed correctly. I guess I miss something on proper positioning. This is what I have so far

Sample fiddle

.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7 {
  display: flex;
  margin: auto;
  border: 2px solid black;
  height: 200px;
  width: 200px;
  position: absolute;
}

.b1 {
  background: red;
  top: 35%;
  left: 45%;
  z-index: -3;
}

.b2 {
  background: blue;
  top: 30%;
  left: 41em;
  z-index: -3;
}

.b3 {
  background: pink;
  top: 25%;
  right: 40em;
  z-index: -2;
}

.b4 {
  background: cyan;
  top: 4em;
  left: 45%;
  z-index: -3;
}

.b5 {
  background: orange;
  top: 28em;
  right: 37em;
  z-index: 4;
}

.b6 {
  background: green;
  bottom: 7em;
  left: 45%;
  z-index: 5;
}

.b7 {
  background: black;
  top: 51%;
  left: 42em;
  z-index: 6;
}
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>

This is my output

This is my output

Upvotes: 2

Views: 243

Answers (1)

Temani Afif
Temani Afif

Reputation: 273513

You don't really need z-index for this but a little 3D transform hack on the first element to achieve it:

html {
 transform-style: preserve-3d; /* This is important to activate the 3D */
}
.b1 {
  background: red;
  top: 30px; left: 240px;
  transform:rotateY(1deg); /* Rotate a little to overlap the Cyan box*/
}
.b2 {
  background: blue;
  top: 80px; left: 300px;
}
.b3 {
  background: pink;
  top: 150px; left: 240px;
}
.b4 {
  background: cyan;
  top: 80px; left: 180px;
}
.b5 {
  background: green;
  top: 200px; left: 300px;
}
.b6 {
  background: purple;
  top: 230px; left: 240px;
}
.b7 {
  background: black;
  top: 150px; left: 168px;
}

[class*='b'] {
  border: 2px solid black;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>

Upvotes: 4

Related Questions