New Screencast: How z-index Works
* 10/30/2008 — 17 Comments *
Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it’s tied to positioning, some quirks, and some general advice.
Just a quicky this week folks, but it’s nice to be back at it.
Loading ...
Are there any issues with z-index in regards to browser compatibility esp. with IE6 and IE7?
I have had some in the past when it came to the absolute and relative positioning, but that could of been just error on my part.
Thanks
Actually yes, there is one rather serious IE 6 (and maybe 7 not sure) bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Basically you can force it to start a new stacking context (on accident) which can really screw stuff up.
This is so good video. I need to use z-index but i couldn’t but now i can! Thank you Chris.
Welcome back Chris!
Excellent screencast. Fortunately I haven’t had a need for z-index yet so I haven’t run into any of the problems you mentioned or had to spend hours/days fighting it.
Now, thanks to you, I’m ready and it’ll be a breeze when I need to use it.
Hey Chris,
Nice to see another screencast! Keep them coming i know they take time but hey they are always welcomes here maybe you can make a whole new series for psd to css/html... that would be nice!
Bug still exists in IE7, but is fixed in IE8 Beta 1.
hey chris. Why did the first badge that you put into the code sit outside the page-wrap when the code was clearly inside the page wrap? did the position:absolute top:0 right:0 take it so far outside of normal flow that it ended up in the browser body instead of the page-wrap?
I tried the postition:absolute last week on a design and the element moved out of position when I resized my browser. I had the element outside the page wrap I think. Someone explained to me that the wrap was moving not the element which did make sense. But what is it that makes the element stay put where you want it when you resize? is it adding position:relative to the wrapper?
@jamie: When you apply position: relative to that wrap, it limits the scope of the absolute positioning to within the wrap. Without it, the absolute positioning will use the browser window as a reference. Since the browser window is fluid, that badge moved around with it. Once you add position: relative to the wrapper, the absolute positioning will use that as a reference instead, so the badge moved around together with the rest of the content.
Very very helpful your video.
I love it!
Man how come I didn’t know about img:hover? I have read countless CSS books and resources and I don’t remember ever seeing it. As soon as I saw you do it my head started swimming with ideas on ways to use it. Thanks for the videos, no matter how simple the topic may seem there can always be something super useful.
Nice video. z-index is sometimes voodoo magic as well
Perhaps if this topic gets covered again it would be nice to go over the classic ALA suckerfish drop down menu.
It’s a really nice example of z-index in action and it tackles common cross browser issues such as problems in ie6 where it only accepts the :hover pseudo class on the A element (requiring a javascript fix).
Also, from that example a random piece of information that has solved a few headaches is when applying z-index to nested lists, make sure you give the parent UL a z-index too and it will fix problems in ie6 & 7.
Just a thought!
nice work — I always hated working with z-index …. you've cleared things up enormously for me, thanks!