Question

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

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

使用position：fixed，我可以设置它的实际位置，这很棒。但是，无论我的z-index如何，一些DIV都出现在上面，其他的则落在后面。

不知道如何在屏幕上的所有内容上显示此图像，无论其DIV，z-index等如何

Answer 1

使用绝对位置但调整由于不在该流程中显示img而导致的变化，例如边距，填充，高度等。如果你是漂浮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/

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

1 个答案: