允许 flexbox 项目在溢出时定位在另一个 flexbox 项目之上

Question

所以我有一个包含多张卡片（flexbox 子级）的 flexbox 容器。

当用户悬停卡片时，卡片翻转，他可以看到一些文字。

有时，文字会溢出卡片，我希望卡片增长并高于其他卡片（未悬停的卡片）。

我设法让卡片变大，但是当它变大时，它总是落后于其他 flexbox 子元素。

我尝试在卡的背面使用 z-index，但它不起作用。

我错过了什么？

PS：为了重现问题，你需要有 2 行卡片。

Codepen

    .container-sdg {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  gap: 5px;
}

.flip-card {
  background-color: transparent;
  width: 150px;
  min-height: 150px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: auto;
  min-height: 150px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #000;
  z-index: 1;
}

.flip-card-back p {
  letter-spacing: 1.3px;
  font-size: 14px;
}

.container-sdg .shape {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shape img {
  object-fit: cover;
}

<div class="container-sdg">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="shape" style="background-color:#e5243b">
          <img src="~/img/SDG/SDG1.png">
        </div>
      </div>
      <div class="flip-card-back" style="background-color:#e5243b">
        <p>> Test 1</p>
        <p>> Test 2</p>
      </div>
    </div>
  </div>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="shape" style="background-color:#e5243b">
          <img src="~/img/SDG/SDG1.png">
        </div>
      </div>
      <div class="flip-card-back" style="background-color:#e5243b">
        <p>> Test 1</p>
        <p>> Test 2</p>
      </div>
    </div>
  </div>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="shape" style="background-color:#e5243b">
          <img src="~/img/SDG/SDG1.png">
        </div>
      </div>
      <div class="flip-card-back" style="background-color:#e5243b"">
                    <p>> Test 1</p>
                    <p>> Test 2</p>
                </div>
            </div>
        </div>
                                                                                     <div class=" flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <div class="shape" style="background-color:#e5243b">
              <img src="~/img/SDG/SDG1.png">
            </div>
          </div>
          <div class="flip-card-back" style="background-color:#e5243b">
            <p>> Test 1</p>
            <p>> Test 2</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <div class="shape" style="background-color:#e5243b">
              <img src="~/img/SDG/SDG1.png">
            </div>
          </div>
          <div class="flip-card-back" style="background-color:#e5243b">
            <p>> Test 1</p>
            <p>> Test 2</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <div class="shape" style="background-color:#e5243b">
              <img src="~/img/SDG/SDG1.png">
            </div>
          </div>
          <div class="flip-card-back" style="background-color:#e5243b">
            <p>> Test 1</p>
            <p>> Test 2</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <div class="shape" style="background-color:#e5243b">
              <img src="~/img/SDG/SDG1.png">
            </div>
          </div>
          <div class="flip-card-back" style="background-color:#e5243b">
            <p>> Test 1</p>
            <p>> Test 2</p>
          </div>
        </div>
      </div>
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <div class="shape" style="background-color:#e5243b">
              <img src="~/img/SDG/SDG1.png">
            </div>
          </div>
          <div class="flip-card-back" style="background-color:#e5243b">
            <p>> Test 1</p>
            <p>> Test 2</p>
          </div>
        </div>
      </div>
    </div>

Answer 1

如果您正在寻找卡在悬停时高于其他卡，那么您需要在卡中添加以下悬停 css：

.flip-card:hover{
  z-index:1;
}