CSS z-index doesn’t work?

by Yang Yang on December 27, 2008

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.

r9ronaldo June 23, 2009 at 5:07 pm

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.

YES May 19, 2010 at 9:50 am

it worked! thanks!

Eddy August 24, 2010 at 2:49 pm

thanks for the help, this is my problem too 😀

Piotr January 3, 2011 at 9:57 pm

Thank you, it helped to fix my problem too. 🙂

cjmm March 10, 2011 at 12:01 am

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

cjmm March 10, 2011 at 12:12 am

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 !

Frank June 2, 2011 at 5:36 am

Wow this works,

it started to get frustrating,

thanks a bunch!

Srgjan July 21, 2011 at 3:01 am

Thanks !

Palki March 21, 2013 at 1:56 pm

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 ?

Joe April 15, 2013 at 5:30 pm

Thanks for the hint!

Michel April 20, 2013 at 10:47 pm

Is applied but does not work. Why not apply a “second” when you already have a “first”. Crappy blog post, really.

Comments on this entry are closed.

Previous post:

Next post: