Menu
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(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>
941
Add z-index:-1 and position:relative to .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>Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
