html - 在页面上所有 DIV 部分的顶部显示图像

Question

基于 Joomla 的网站，DIV 部分在模板中划分页面。

我需要在页面上的所有内容之上显示一个图形。使用 position: relative 或 position: absolute，它只调整当前 DIV 部分内的位置。

使用 position: fixed，我可以设置它的实际位置，这很棒。但是，无论我的 z-index 是什么，一些 DIV 都出现在上方，而另一些则出现在后面。

不知道如何在屏幕上的所有内容之上显示此图像，而不管它的 DIV、z-index 等。

Answer 1

使用绝对位置，但调整由于在该流中不显示 img 而引起的变化，例如边距、填充、高度等。如果您正在 float img，您也需要固定位置。

<div>  
    <div>before img</div>
    <img class="img--absolute" src="http://placekitten.com/50/60"/>
    <div  class="absolute-fix">after img</div>
</div>

.img--absolute{
    position: absolute;
}

.absolute-fix{
    margin-top: 70px;
}

<div class="img-container--float-fix">beffor img</div>
    <div>before img</div>
    <img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
    <div class="absolute--float-fix">after img</div>
</div>


.img-container--float-fix{
    position: relative;
}

.absolute--float-fix{
    padding-right: 60px;
}

.img--float.img--absolute{
    right: 0;
}

http://jsfiddle.net/o5sboe1s/