a:hover -> cant change z-index

you probably have absolutely or relatively positioned elements on top of it - anything with a position: attribute other than the default causes it to be rendered above static elements.

A simple fix is to add position: relative to your hover state which you want on top, and leave the z-index value in

Hope this helps!

A higher z-index means it is more likely to display on top. It doesn't mean it will on every browser.

The best way I've found to ensure it works is to use negative z-index values and build it from the ground up.

Eg
Set the bottom most item to z-index: -100.
Set the top most as z-index: 100
Set default as z-index: 0
Then position all other elements in between.

If an element will have more elements above it than it does below, it should have a negative z-index.
If an element will have more elements below it than it does above, it should have a positive z-index.

Hope this helps.

Rafe: If I understand you then you mean that my pop up box (dd a:hover span) should have position: relative; specified? The problem is I already have this as I read something similar on other pages.

Rartemass: Some browsers doesnt support negative z-indexs though. Also I am fairly happy that my z-indexs are correct, I am under the impression that it has something to do with the parent in which the hovers are positioned it. Ie my layers look like this at the moment (from bottom to top),

Loading image (z-index: 10)
Car image (z-index: 50)
Navigation arrows  (z-index: 100)
Hovers (z-index: 120-400 depending on what part)
Popup  (z-index: 500)
Popups heading (z-index: 800)

I forgot to say this is the first css page I am doing as well. Learning by tutorials and trial & error. I might need examples depending on how difficult the solution is.

Thanks for the quick replies!

Ok finally got somewhere! Having f***ed about for a few days now I just sat down and thought logically about this.

The pop up box is obviously inheriting the z-index from the hover zone, setting a new one individually on it does not work for some reason.

So if I change the hover zones Z-index instead on hover, then the pop up box should work as well.

This is a example of what I used to do,

#Hovers1 dd#left_door_window{ position: absolute; top: 93px; left: 260px; z-index: 238; }
#Hovers1 dd#left_door_window a{ position: absolute; width: 202px; height: 78px; text-decoration: none;  }

#Hovers1 dd#left_door_window a:hover{ position: absolute; z-index: 500; }

Why doesn't this work? Well, since I specified the z-index on the parent "#Hovers1 dd#left_door_window" but I am then trying to change it on "#Hovers1 dd#left_door_window a:hover" (not the a before the :hover).

So I moved the Z-Index to the second row "#Hovers1 dd#left_door_window a" and now my "... a:hover" will override my "... a" values including Z-Index.

This is a fairly good solution. It doesn't fix the actual problem though, why I cant set a z-index on the pop up window. Whilst this solution fixes 90% of the problem areas, there are still a few there.

Have a look at the page again now, if you hover the door, you will see the pop up just below the car. If you now move the mouse to hover over the door handle, it will fail. This is because now that the hover has changed the Z-Index to the highest in the page, it now covers the door handle which usually has a higher Z-Index.

I will reward 500 points to who ever shows me how I can change this so that the z-index only takes affect on the pop up window, not the pop-up window and hover zone which is what I have at the present.

Thanks!