View Full Version : z-index not working?

Feb 28th, 2011, 02:48 AM
Page in question:


The first <LI> should be z-index: 2; and should be on top of any other <LI> further down.


.sitemap #primaryNav > ul > li {
float: none;
background: #ffffff url('images/L1-left.png') center bottom no-repeat;
z-index: 2;
position: relative;

The idea is that the background color of #fff should be ontop of the <LI>'s below, thereofre creating an effect similar to this:


Feb 28th, 2011, 09:15 AM
thereofre creating an effect similar to this:

http://tinyurl.com/6dc6nh7 That link gives
Not Found

The requested URL /sitemap2/ was not found on this server.

Feb 28th, 2011, 12:43 PM
You can just view it at http://astuteo.com/slickmap/demo/


if you use firebug on the above link and disable position:relative
from #primaryNav #home You'll see that it looks like mine. I am not sure how to get it to be like theirs.

Mar 1st, 2011, 05:08 PM
I've posted this question at stackoverflow.

It can be seen here:


One of the answers includes:

The parent will need to have position relative to get a proper z-index stacking context. Super obscure, but maybe this will work for you?

Try reading through this link to get a better understanding of the (super obscure, no fault of yours) method of determining the stacking priority of DOM elements:


Although I am unable to correctly get it to work even if I mess around with parent positions. Perhaps someone with more experience can tell me what I am missing?