Stacking Content & Positioning Issues

Greetings,

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,

Mr. Alexander

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.

This is the index page of positioning schemes, it will lead off into all the related subjects.

Tommy has also got some good articles at Opera Web Dev
Opera Dev - Absolute and Fixed Positioning

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:

http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

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”.

Thank you, once again, for your help!

Mr. Alexander

Here is a nice article on how z-index should work:

and here’s a useful post on what IE does wrong and how to fix it: