z-index issue

[alain]

Hi,

i'm facing an interesting problem with z-index.
usually i do not have it, but for sure something is hidden and now i'm confused.
so i need an external eye.

i have a link with allows user to change web page language.
when mouse is over it it should display a div with all available languages + pictures.

this works well except that whatever value of z-index i have for this div, every time is behind other divs with z-index < -2 till -4.

i tried to give to this menu div a z-index of 0 or 100. but still the same issue.

where could be the stupid issue ?

here is the mouse out status picture : http://i220.photobucket.com/albums/dd277/alainroger/menu---mouse-out.jpg

and here is the mouse over status picture :
http://i220.photobucket.com/albums/dd277/alainroger/menu---mouse-over.jpg

here is my webpage code :

<a href="#" id='BtnLang_txt' onmouseover = 'DisplayDivLanguage("LanguageMenu",this.id);' onmouseout = 'HideDivLanguage("LanguageMenu");'>Change(english)</a>
<div id='LanguageMenu'>test<img id='service_development_img' src='../themes/images/welcome/development.jpg' /></div>


and here is the CSS extract:

#LanguageMenu
{
float : right;
z-index : 100;
display : none;
background-color : #FF00FF;
margin : 30px 0px 0px 0px;
}

[WebJoel]

Are you using a 'negative' Z-index? I might be incorrect here but I thought that only IE supports negative z-indexes. I have had problems in the past with this so just always use positives.

I also think that it is possible to inherit-relatively (not sure if that is the correct nomenclative..)..

Something about position:relative; establishing the 'containing block' for any absolute-positioned element contained inside, which if the 'parent' of the first position:relative (be it 'wrapper' or 'body', whatever) has a z-index higher than the 'position:relative' container but lower than the 'position:absolute' elements container in the relatively-z-indexed container, the abs-pos' might 'disappear' on-hover.. This can be a real head-scratcher if you're making say, a drop-down list with multiple levels of drop-downs and some of them 'disappear' behind blocks of non-related content...

Now, -having fumbled through this arcane dissertation, I'll look at your code and see if I am even close in my guess... :o

I do note that you have not declared the DIV as being "position:relative;" A "z-index" will only work on an element that is "positioned", either "relative" or "absolute". The default (un-stated) value, is "position:static;" and you cannot "z-index" that..

[smyhre]

Just to clarify on z-index: negative z indexes will not work in FireFox unless you use quotes around the number but if you do that then it won't validate so the only fix on that is to use z-index from 0 on up. And yes a z-indexed element must be positioned relative or absolute to actually work with the z-index stated.

[alain]

I'm really stupid to forget that point (position : relative);

thx for reseting my mind :-)

[WebJoel]

No not at all, -you stated your problem quite well and provided examples of your code. Well done you. :)