#40: How z-index Works
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.
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.
If static element won’t do z-index, does it mean, that it kinda has z-index-value of zero through the line.
Thanks for the info! Very usefull.
Mike.
Thanks for the great tips. Just got a quick question if anyone knows using the z-index can i place any div element with a higher z-index over a flash movie. I know Chris mentions about drop down menus somtimes getting lost under flash. But is it simply a matter of creating a div element for the flash and another div element for the page element you want to layer on top of the flash movie and setting the position to either absolute or relative and setting the z-index to a higher value?
will this work?
how do you get IE 7 on your mac?
http://css-tricks.com/ie-on-mac/
Or you could just #badge:
z-index: -1;
I love how I can nav to css-tricks.com and search for “z-index” and get the info I need to get the job done right!
Thanks again!
Hello,
First, i would thank you for the lessons on this site.
Is it possible to give a lesson about positioning in css.
I am a beginning webdesigner and i have some problems with positioning in css, espacially between the different browsers.
Thank you,
Ivan
It isn’t work!
404 PAGE NOT FOUND!
please, fix it…
Chris…. the video doesn’t seem to be working. Hopefully it’s up soon b/c “z-index” has been the bane of my existence today.
Not sure why…. but after posting my comment the video now works. More importantly it answered my z-index problems. Thanks once again…. you rock.
Video not working for me either:(
The vid doesn’t work :(
Great video as always Chris, LOVE your videos!
Thank you, Chris: this video had exactly the information that I needed.
I believe you forgot to explain how z-index works for nested elements. Does z-index works only for sibling elements? Is it possible for a “child” element to have a greater/lower z-index than his “parent” or his “uncle”?
AFAIK, a parent element with z-index (and position) properties resets the stack order for the children within, right?
I’ve read a lot of great stuff on your site – unfortunately this did not solve my problem. For anything complicated see the “Stacking Contexts” page at sitepoint (http://reference.sitepoint.com/css/stacking). Any declaration of a z-index for an element will create a new local “stacking context”, and that element and all its children/descendants will be put in the same slot in any higher-level stacking context.
So if you have #parent>#child, and you need to stick some random element above #parent but below #child, then #parent has to have z-index: auto. (I believe – at least this is what solved my problem.)