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-statisticsdiv 重叠。我怎样才能做到这一点？截至目前，我尝试将图像的位置设置为相对并将顶部设置为 -150px，但这似乎是一个完全的黑客攻击，并不干净。还有什么办法吗？

Answer 1

设置imgtoposition: relative;和 using- top值将保留img文档上的物理空间，而不是将容器元素设置.gauge为，position: relative;而不是设置img为position: absolute;，现在必须将容器设置为，relative否则您的absolute定位元素将在野外流出。

演示

.gauge {
    position: relative;
}

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

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

---

我已经分配了一个classtoimg标签。如果您有一个img嵌套在里面.gauge，那么您也可以使用而不在标签上.gauge img声明 a 。classimg

Answer 2

设置position:absolute为 div user-follow-statistics。

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

演示：http: //jsfiddle.net/U2q6E/14/