Best IT Recipes

Bringing an element forward using CSS

I can't figure out how to bring images to the front using CSS . I already tried setting the z-index to 1000 and the position to relative, but it still doesn't work.

Here's an 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>
+48
html css css3 z-index jsfiddle
Apr 03 '13 at 8:11
source share
4 answers

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>
+80
Apr 03 '13 at 8:16
source share

Note: z-index only works with positioned elements ( position:absolute , position:relative or position:fixed ). Use one of them.

+19
Jun 26 '15 at 1:42 on
source share

In my case, I had to move the html code of the element that I need at the front at the end of the html file, because if one element has a z-index and the other does not have a z index, it doesn’t Work.

+1
Jul 09 '15 at 5:19
source share

Another note: z-index should be considered when viewing child 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 z-index 99 and you gave branch_2__child z-index of 1, but you also specified your branch_2 z-index 10 and your branch_1 z-index 1 , your branch_1__child will not appear before your branch_2__child

In any case, I'm trying to say; if the parent element that you want to place in front has a lower z index than its sibling, this element will not be placed higher.

Z-index refers to its containers. The z-index, placed on the container further in the hierarchy, basically launches a new “layer”

Incep [start] Tion

There is a fiddle here:

https://jsfiddle.net/orkLx6o8/

0
Jan 12 '17 at 18:43 on
source share


More articles:


All Articles