CSS style property z-index determines the stack order of an element overlapping with others. There might be times when you find it not working for you and element with a bigger z-index falls behind one who has a smaller one.
Frustrating but why?
First, make sure the elements who has z-index property also has position:relative or position:absolute.
z-index simply doesn’t work on elements who are position:static which is unfortunately also the default position style for all HTML elements if you don’t specify otherwise.
Now is it working correctly?
Well, to understand more about the z-index thingy, head to here.
Another thing to remember is IE6 doesn’t play nice with z-indexes if they are within different relatively positioned elements! So annoying. The indexes end up ignoring each other. Read this http://verens.com/archives/2005/07/15/ie-z-index-bug/ as it explains it better than I can.
it worked! thanks!
thanks for the help, this is my problem too 😀
Thank you, it helped to fix my problem too. 🙂
Hi!
i still have problems with z-index, even if all my elements are positioned.
i hope you can help me, thank ypu in advanced!
this is an example:
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’860′,’height’,’406′,’src’,’container_1′,’quality’,’wmode’,’opaque’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’container_1′ ); //end AC code
thank you in advanced
sorry , i forgot some detail in the last post!
i try to set a z-index in a div that contain a flash object, and over the flash object are some others div. all div has positioned and z-index,
this work in firefox 3.6 and safari on mac
but doesn’t work in IE, chrome, firefox windows
and chrome mac
i tryed settin the wmode=opaque and transparent but no fixing the problem
hope i explain clear!
thank you !
Wow this works,
it started to get frustrating,
thanks a bunch!
Thanks !
thank you it is working.but facing another issue.
i am appling z-index property to parant child div.
i want my child div height and width should adjust according to parent div.
but on resizing window it is not working fine.
could you help me out for this ?
Thanks for the hint!
Is applied but does not work. Why not apply a “second” when you already have a “first”. Crappy blog post, really.