如何使用 z-index 重叠框？

Question

我是 html 和 css 的新手。我试图了解 z-index 并希望获得以下输出。不知样品是否可行

每次我更改所有框的z-index时，总有一个框不能正确放置。我想我错过了正确定位的一些东西。这是我目前所拥有的

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

这是我的输出

Answer 1

你并不真的需要 z-index 来实现它，但对第一个元素进行一点 3D 变换 hack 来实现它：

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>

如何使用 z-index 重叠框？

How do i overlap boxes using z-index?

html

css

z-index