如何将一个 div 放在另一个 div 之上？答案

【问题标题】：How to place div inside a div over another div?如何将一个 div 放在另一个 div 之上？
【发布时间】：2022-11-18 07:14:37
【问题描述】：

我有一个 div，它在另一个 div 中有一个图像。我想将内部 div 放在第二个 div 上。所以下图中的箭头应该越过红色。这可能吗？

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

【问题讨论】：

这真的不是 React 问题。我已将您的代码转换为纯 HTML。请进一步修改以显示问题。

标签： javascript html css reactjs

【解决方案1】：

您应该将 position:relative 放在引用 .puscicaAnimacija 类的第二个 div 上，然后在第二个元素上使用属性 z-index，其值高于第一个元素。

.puscicaAnimacija{
   position: relative;
}

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

【讨论】：

我添加了您推荐的内容，但它仍然不起作用。
将 position: relative 放在第一个元素上

【解决方案2】：

笔记：我已经将您的一些 classNames 转换为使用命名类，并添加了一些额外的 CSS 用于演示目的

也许尝试这样的事情：

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

【讨论】：

【解决方案3】：

为了使用 z-index，必须定位父元素。在你想要进入的 div 上使用 position:relative。

【讨论】：

我添加了位置：相对，但它没有将箭头放在它上面。