重叠图像和DIV

我有以下HTML结构：重叠图像和DIV

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

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

我想这个图像被定位重叠user-follow-statistics DIV。我怎样才能做到这一点？到目前为止，我尝试将图像的位置设置为相对并将顶部设置为-150像素，但这似乎是彻头彻尾的黑客并且不干净。任何其他方式？

来源

2013-10-31 adit

你能以图片的方式展示你所要求的吗？ –

为你的问题做一个小提琴。 – Rex

在这里你去：http://jsfiddle.net/84cC3/1/ – adit

设置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; 
}

如果找到元素堆叠的任何问题，请z-index为.gauge img.coming_soon

我分配了一个class到img标签。如果您在.gauge内部嵌套了一个img，则您也可以使用.gauge img而不声明img标签上的class。

来源

2013-10-31 04:42:39

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

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

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

来源

2013-10-31 04:35:34

试图改变它绝对，img现在重叠，但它似乎是它的隐藏（意思我看不到） – adit

设置'z-index：100'并检查.. –

重叠图像和DIV

回答

相关问题