Hi, hopefully someone has a solution to my problem. I'm new to CSS so it has been a learning experience. I provided code below hoping it may help. I have tried several forums and resarched until my fingers bleed but no solution. I have a #footer1 which is wrapper for #webmaster and #links. I have words in both #webmaster and #links. In #footer2 I have a picture of a plant as a background image. The plant overlaps into footer 1 which is what I want. I also want the words in footer 1 to be on top of the plant in footer 1. I set the z-index in footer1 to 200 so it stacked higher than than footer 2 which has a z-index of 100. Everything is perfect in Firefox. However, in I.E. the words in footer 1 are not ontop of the plant in footer 2 even though footer 1 has a higher z-index. Like I said it works great in Firefox. Can anyone tell me how to get the same effect in I.E. You can take a peek at http://www.filipinaeyes.com/indexnew.htm (don't laugh, I'm new at this stuff...look at it with firefox and you will see what I want..the plants are at the bottom left and right). Thanks for your help in advance. Steve #footer1 {position:relative; clear: both; line-height: 1.5em; z-index: 200;} #webmaster{float:left; width:47%; font-size: 12px; font-weight: bold;} #links{float:right; width:47%; font-size: 12px; font-weight: bold;} /*The start of footer 2*/ #footer2{clear: both; margin-left: 203px; margin-right: 203px; } #footer2 h2 {margin: 0em; padding: 0em; background-image: url(imagesnew/plant2.gif); background-repeat: no-repeat; background-position: 0 0; width: 200px; height: 264px; position: absolute; right: 0em; bottom: 0em; z-index: 100; clear: both;} #footer2 h3 {margin: 0em; padding: 0em; background-image: url(imagesnew/plant3.gif); background-repeat: no-repeat; background-position: 0 0; width: 200px; height: 264px; position: absolute; left: 0em; bottom: 0em; z-index: 100; clear: both;}
You use z-index on non-positioned elements (e.g. the Webmaster Stuff div has z-index: 200). According to the CSS spec, z-index only applies to positioned elements (i.e. those whose position property has a value other than static). J.D.
footer 1 has a postion of relative and footer 2's h2 and h3 childs have absolute positioning....so they are not static, right? Footer one is a container div that has both the webmaster div and link div inside. Since footer1 has a position of relative, doesn't webmaster and link div also? My research shows that you can use both relative or absolute positioning for z-index.
I used FF's DOM inspector tool and it shows that the div I mentioned has z-index 200 and a static computed position. J.D.
Thanks JD...I figured it out....you gave me the key and I was able to experiment and get it to work. Thanks again for your time. Liza.
You were right, JD. I assumed because both webmaster and link div was wrapped in a container called footer div that they would inherit the relative postion I put in footer div. Not the case. I had to put relative postion in the two childs -- webmaster and link div -- for it to work. Thanks again liza
Take a peek at this post: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html z-index only works on elements that have position:relative or position:absolute. For an experimental learning resource, you can further your understanding of how z-index works at here: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp