I have been trying to get z-index, and stacking order of elements to work for a while and decided to take care of it for once and for all.
I would like to read a comprehensive guide as to how do z-index, floats, position (relative, absolute etc.) affect the stacking order in browsers (mainly IE) and what is the “best way” to go about it in order to have flawless results every time ?
Also, how do floats, position: relative, z-index all play a roll in determining the outcomes ? I read many articles and now it seems that what i read is no longer in use and its time to sharpen my skills.
I have attached screen shots of how my elements come up in IE7 and wanted to ask for anyone’s advice as to how to fix. one screen shot is from before and one screen shot is after the drop down menu comes out.
If there are any css or html code that you would like me to share I would be happy.
Thank you in advance for helping me take care of this,
Also, how do floats, position: relative, z-index all play a roll in determining the outcomes ?
Hi,
Not sure if you have looked there yet or not but the SP reference has some good info on positioning, stacking context, z-index, and float relationship.
Thanks for the articles. Since I posted this thread, I have looked at some articles and found some interesting things about z-index i did not know before.
As my css files are several thousand lines long it will take me sometime to apply these examples accordingly.
By the way, a nice articles aside from the one you mentioned is this one:
They are pretty much talking about the same elements but i liked everything under the heading “The Natural Stacking Order”, which explains how do elements are positioned “naturally”.