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 { background: url() center top no-repeat; } #header-inner { background: url() 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> <div> <table> <col width="400px" /> <tr> <td> <table> <col width="400px" /> <tr> <td> <div></div> </td> </tr> <tr> <td></td> </tr> </table> <table> <col width="120px" /> <col width="160px" /> <col width="120px" /> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </td> </tr> </table> </div> <!-- header-inner --> </div> <!-- header --> </body>4 Answers
Add z-index:-1 and position:relative to .content
#header { background: url() center top no-repeat; } #header-inner { background: url() 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> <div> <table> <col width="400px" /> <tr> <td> <table> <col width="400px" /> <tr> <td> <div></div> </td> </tr> <tr> <td></td> </tr> </table> <table> <col width="120px" /> <col width="160px" /> <col width="120px" /> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </td> </tr> </table> </div> <!-- header-inner --> </div> <!-- header --> </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.
2Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div> <div> <div></div> </div> <div> <div></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:
