允許flexbox專案在溢位時位于另一個flexbox專案上方

所以我有一個包含多張卡片（flexbox 子項）的 flexbox 容器。

當用戶懸停卡片時，卡片翻轉，他可以看到一些文字。

有時，文字會溢位卡片，我希望卡片能夠增長并高于其他卡片（沒有懸停的卡片）。

我設法使卡片成長，但是當它成長時，它總是落后于其他 flexbox 孩子。

我嘗試在卡的背面使用 z-index 但它不起作用。

我錯過了什么？

PS：為了重現該問題，您需要有 2 行卡。

代碼筆

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

uj5u.com熱心網友回復：

如果您希望卡片在懸停時高于其他卡片，那么您需要將以下懸停 css 添加到卡片中：

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

標籤：html css 弹性盒

上一篇：無效的工具提示位置可能嗎？

下一篇：jQueryUISelectbox在第二次輸入時不起作用