css - 将背景图像提升到内容之上

Question

好的，所以我希望发生的是我将背景图像设置为显示在页面上所有其他元素的顶部 - 设置在右侧，一半在内容 block 上，一半在边...目前我的结构是:

    <div id="SideImage">
    <div id="Contain">
    <div id="Dash"></div>
    <div id="content">
    <h1>Heading 1</h1>
    <p>Content</p>
    </div>
    <div id="Footer">
    <p>Footer Content</p>
    </div>
    </div>
    </div>

CSS 如下所示，当我使用 FireBug 时，z-index 不起作用，如果我从 Contain css 中删除背景颜色，我可以看到完整的图像，但我希望 SideImage 在 Contain 背景上，Dash 背景和页脚。我唯一能想到的另一件事是在 SideImage Div 上方设置一个 Div，其背景颜色仅为特定宽度，并从 Contain Div 中删除背景颜色。有什么想法吗？

#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}

#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}

#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}

#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}

JSFiddle of code above

Answer 1

Z-index 可能是一个善变的情妇。对于这样的事情，我通常采用内容呈现顺序。基于上述标记和您的想法，我倾向于同意包含 #SideImage 的背景不可能位于其任何内容的“顶部”。有关详细信息，请参阅该 Smashing 链接中的图表。

如果您添加了元素 <div id="SideFill" class="ir"></div>，您可以对您的 css 进行更改:

#SideImage {  width:100%;  position:relative;}#SideFill {  position:absolute;  width:15%;  height:100%;  top:0;  right:0;  background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;}