我无法弄清楚如何使用CSS将图像带到前面。我已经尝试将z-index设置为1000并定位到相对位置，但它仍然失败。
这是一个例子 -
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>将z-index:-1和position:relative添加到.content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>注意：z-index only works on positioned elements（position:absolute，position:relative或position:fixed）。使用其中之一。
在我的情况下，我不得不在html文件的末尾移动我想要的元素的html代码，因为如果一个元素具有z-index而另一个元素没有z索引则它不起作用。
另请注意：在查看相对于其他对象的子对象时，必须考虑z-index。
例如
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
如果你给branch_1__child一个qzxswpoi的z指数，你给99一个z指数为1，但你也给你的branch_2__child一个zz指数branch_2和你的10一个z指数branch_1，你的1仍然不会出现在你的branch_1__child面前
无论如何，我想说的是;如果您想要放在前面的元素的父元素的z-index低于其相对值，则该元素不会放在更高的位置。
z-index相对于其容器。放置在层次结构中更远的容器上的z-index基本上开始一个新的“层”
开始[开始]重刑
这是一个小提琴：
branch_2__child