Positioning and Z-index with Ninesixty

My last post briefly compared theming with Ninesixty and Fusion. One of the issues I mentioned regarding Ninesixty was z-index problems in IE6 and 7. I think this could be a topic by itself since z-index seems to be a little misunderstood even among people who work with CSS. The problem isn't so much not understanding z-index as it is not understanding positioning, which is what determines z-index. Let's take a look at a few examples to make it a little clearer. If you're using Internet Explorer 6 or 7, you may want to switch to another browser like Chrome or Firefox for this example. The issue with Ninesixty and z-index deals with how it assigns widths to containing elements. Ninesixty divides the content width into grids that can be assigned to these elements with classes. Along with width, other properties are added including position: relative. For all browsers except IE 6 and 7, this works without any problems. The problem with IE is that when an element is given a position of relative, absolute or fixed the z-index is essentially set to zero. Once this happens, all other positioned elements that follow it in the source will be higher in the stacking order. To make this a little clearer, take a look at the two examples below. The blue boxes are all set to position: relative, the same way Ninesixty would set any container that has a grid class. Inside the light blue boxes it has a typical CSS dropdown menu that is activated on hover. Go ahead and roll over each example if you haven't already. The box on the right is styled to resemble IE 6 and 7. Since the light blue and dark blue boxes are both set to position: relative, IE 6 and 7 basically sets the z-index to zero. Since the dark blue box is lower in the source than the light blue box it is higher in the stacking order, which is preventing the dropdown menu from displaying on top. You can try to change the z-index of the dropdown to something higher, but it won't do any good since its parents z-index is what is determining the stacking order. So the obvious solution is to set the parents z-index, in this case the light blue box, to something higher. You can try that yourself if you have Firebug, or you can use this. When using Ninesixty and you need content to overlay elements on your page, you may want to set z-indexes with descending values from top to bottom on containers that have grid classes. There are scripts available that can do this for you but they can also introduce bugs. Whatever method you take, be aware of how Internet Explorer treats positioned elements. And if you have your own way of addressing this issue, make sure to let me know in the comments! Photo Credit