PDA

View Full Version : z-index not working?



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

http://tinyurl.com/49smqqy

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

CSS:


.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:

http://tinyurl.com/6dc6nh7

abduraooft
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.

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

Sorry...

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.

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

It can be seen here:

http://stackoverflow.com/questions/5150862/z-index-not-working-right.

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:

https://developer.mozilla.org/En/Understanding_CSS_z-index/The_stacking_context

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?