I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {_x000D_
background: url(http://placehold.it/420x160) center top no-repeat;_x000D_
}_x000D_
#header-inner {_x000D_
background: url(http://placekitten.com/150/200) right top no-repeat;_x000D_
}_x000D_
.logo-class {_x000D_
height: 128px;_x000D_
}_x000D_
.content {_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
table-layout: fixed;_x000D_
border-collapse: collapse;_x000D_
}_x000D_
.td-main {_x000D_
text-align: center;_x000D_
padding: 80px 10px 80px 10px;_x000D_
border: 1px solid #A02422;_x000D_
background: #ABABAB;_x000D_
}<body>_x000D_
<div id="header">_x000D_
<div id="header-inner">_x000D_
<table class="content">_x000D_
<col width="400px" />_x000D_
<tr>_x000D_
<td>_x000D_
<table class="content">_x000D_
<col width="400px" />_x000D_
<tr>_x000D_
<td>_x000D_
<div class="logo-class"></div>_x000D_
</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td id="menu"></td>_x000D_
</tr>_x000D_
</table>_x000D_
<table class="content">_x000D_
<col width="120px" />_x000D_
<col width="160px" />_x000D_
<col width="120px" />_x000D_
<tr>_x000D_
<td class="td-main">text</td>_x000D_
<td class="td-main">text</td>_x000D_
<td class="td-main">text</td>_x000D_
</tr>_x000D_
</table>_x000D_
</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<!-- header-inner -->_x000D_
</div>_x000D_
<!-- header -->_x000D_
</body>Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<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>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
Source: Stackoverflow.com