Html 重叠图像和div

我有以下html结构：

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

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

---

我希望将此图像放置在与

用户跟踪统计数据

div重叠的位置。我如何才能做到这一点？到目前为止，我尝试将图像的位置设置为相对位置，并将顶部设置为-150px，但这似乎是一个完全的黑客行为，并不干净。还有其他方法吗？

为div

用户跟踪统计设置
位置：绝对

#user-follow-statistics{
position:absolute;
}

演示：
将
img
设置为
位置：相对
并使用
-
top
值将在文档上实际保留
img
的空间，而不是将容器元素设置为
.gauge
到
位置：相对img
设置为
位置：绝对
，现在必须将容器设置为
相对
，否则您的
绝对
定位元素将在野外流出


如果您发现元素堆叠有任何问题，请使用
z-index
进行
。仪表img。即将推出


我已经给
img
标签分配了
class
。如果你有一个
img
嵌套在
.gauge
中，那么你也可以使用
.gauge img
而不用在
img
标签上声明一个
类。
你能以图形化的方式显示你的要求吗？为你的问题做一个小摆设。看，我觉得不错，试着把它改成绝对值，img现在重叠了，但它似乎是隐藏的（这意味着我看不到它）
.gauge {
    position: relative;
}

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