Probably the most complex CSS layout I built is the one that runs the Internet channel of my company’s main product. As this channel is viewed by customers of our clients, each design has to be different enough. Sites must not look like copycats with different colours. They also need to run on the same server-side code, to simplify maintenance and development.
CSS floats and positioning is the right tool for that job on today’s Internet. While I fully grasp the float stuff and use it with much joy, the positioning part is often giving me headache. The online channel interface relies heavily on positioning, showing/hiding elements and neat stacking of boxes below/above each other.
Positioning also gives me way too much trouble with my multi-level menu.
Trying to clarify these things for myself and resolve ongoing problems, I built a series of pages to see how various z-index values influence the placement of relatively and absolutely positioned elements. I have dozens of nested RP and AP elements in the mentioned interface, and some overlapping issues seems unsolvable.
After three or four pages, I realized that this could be a neat tutorial, especially because I don’t see that this issue is tackled much in books, blogs and other resources.
Thus, here it is: The effect of z-index value on RP and AP blocks.
The best part: the only browser(s) that correctly implements CSS2.1 specification is IE. Yes, really.
update (Sep 15th): Dave Hyatt responded and proved me very wrong. The guide is now updated with (hopefully) correct information.
I tested in Firefox 0.9.2, Opera 7.5, IE6.01, IE5.2.3/Mac, Safari 1.2.3, OmniWeb 5.0, Camino 0.8.
Funny, i had some issues recently regarding z-index, but never thought about all those combinations. This guide is very handy, it’s already in my bookmarks!
Good work!
Great tests! Did you check Bugzilla — are there any known bugs about this? It is puzzling that everyone but IE gets it wrong. The really curious example is the one on your page 7, where you explictly set RP2 > RP1, and this makes all the browsers behave. It ought to be the same as if you had never set those z-indexes on the RPs, but explicitly telling them how they ought to be stacked seems to shake the browsers into compliance. Weird.
I just searched Bugzilla, looking for “position z-index” but found nothing on this. I might have searched wrong — I never liked bugzilla’s interface, and find it very averting.
Nice research, Aleksandar! Bookmarked…
Dave Hyatt thinks a little bit differently…
Nice tutorial, which I’ll immediately apply in trying to get IE to behave . Two suggestions:
a) it would be improved if you could set up the screenshots so the numbers aren’t covered.
b) did you mean “get 2 AP1 over AP2” on page index 5?
Steven, I don’t understand what you mean with the second question? Point of that page is to show that applying higher z-index to RP1 than to AP2, all of RP1 will be positioned over AP2.
Oh wow Aleksandar — thank you SO much for this tutorial. I was going CRAZY trying to fix an IE z-index issue. With the help of your tutorial and a little lateral thinking I’ve found a solution to a problem I was beginning to believe was impossible to solve. Hooray!
*does Snoopy happy Dance around the room*
i want find the solution for DIV overlapping by combo box. z-index no longer working in ie6. If we try to put DIV over the combo box in ie6 DIV gets overlaping. so i got solution for this using IFRAME. but when we use ‘https’, IFRAME gives problems. so now i’ m searching some other solution. so enybody know to solve this problem that would be appreciated!
Thank you for this article and the working examples! I was having a z-index issue in IE7 with an AP element inside of an RP element and it wasn’t floating above another div placed after the RP element. Once I saw that applying a z-index to the RP element made it do what I wanted, I was quite relieved… though I would have never thought of that without reading your article.
Thanks for saving me!
Great tests. I wanted to share with everybody, that an alternative to correcting many of the problems associated as well, is to simply use z-index: +1; or z-index –1; respectively.
This method works in nearly all use-cases. [ie: If a dropdown menu does not appear, because it positions below the container element directly below in the document order — use z-index: –1; in the header container (and sometimes the navigation container as well)].
I am working on a website for my company on my computer, and I have the z-index working it. Except for the pull-down menu in IE. I have used both JavaScript and non, to create the dropdown menu and it always falls behind everything except my background in IE.
Any advice you give would be appreciated, if you have the time.
Eric Rueger
Kroskin Design Group
So in a nutshell we figured out to tell every layer an exact z-index. But add non-full-opacity values and you are again back on the road to developer’s hell when testing in IE.
IE7 renders opacity < 1 BELOW opacity =1 no matter what z-index or ordering you do.