如何將一個 div 放在另一個 div 之上？

Question

我有一個 div，它在另一個 div 中有一個圖像。 我想將內部 div 放在第二個 div 上。 所以下圖中的箭頭應該是 go 在紅色上方。 這可能嗎？

 .puscicaAnimacija { bottom: -2%; height: 5%; margin-bottom: -10px; z-index: 2; position: absolute; }

 <div class="first"> <div style="display: flex; justify-content: center;"> <img src="https://via.placeholder.com/100" class="puscicaAnimacija" /> </div> </div> <div class="second"> </div>

Answer 1

您應該將position:relative放在引用.puscicaAnimacija class 的第二個 div 上，然后在第二個元素上使用屬性 z-index，其值高於第一個元素。

.puscicaAnimacija{
   position: relative;
}

.second{
   position: absolute;
   z-index: 3;
}

Answer 2

為了使用 z-index，必須定位父元素。 在你想要 go 下的 div 上使用position:relative 。

Answer 3

注意：我已經將您的一些類名轉換為使用命名類，並添加了一些額外的classNames用於演示目的

也許嘗試這樣的事情：

.first {
  background: navy;
  width: 300px;
  height: 100px;
  position: relative;
}

.ontop {
  background: whitesmoke;
  width: 300px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

.second {
  background: red;
  width: 300px;
  height: 50px;
}

.puscicaAnimacija {
  bottom: -40%;
  left: 10%;
  height: 48px;
  position: absolute;
}

<div class="first">
  <div class="ontop">
    <img src="https://cdn-icons-png.flaticon.com/512/159/159119.png" class="puscicaAnimacija" />
  </div>
</div>

<div class="second">
</div>