html - 重叠图像和 div

Question

我有以下 html 结构:

 <div class="gauge">
     <div id="user-follow-statistics">

     </div>
    <img src="{{ asset('bundles/shopiousmain/img/coming-soon.png') }}"/>
 </div>

我希望这张图片与 user-follow-statistics div 重叠。我怎样才能做到这一点？截至目前，我尝试将图像的位置设置为相对位置并将顶部设置为 -150px，但这似乎完全是 hack 并且不干净。还有其他办法吗？

Answer 1

将 img 设置为 position: relative; 并使用 - top 值将保留img 物理上的文档，而不是设置你的容器元素，即 .gauge 到 position: relative; 然后设置 img 到 position: absolute;，现在必须将容器设置为 relative 否则你的 absolute 定位的元素将在野外流出.

Demo

.gauge {
    position: relative;
}

.gauge img.coming_soon {
    position: absolute;
    top: 0;
}

如果您发现元素堆叠有任何问题，请为 .gauge img.coming_soon 使用 z-index

---

我已将 class 分配给 img 标记。如果你有一个 img 嵌套在 .gauge 中，你也可以使用 .gauge img 而无需声明 class 在 img 标签上。