Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7

Question

I\'m creating a prototype of a CSS/XHTML tables-based calendar that eventually will be generated with PHP for the Simple Updates content management system. I\'ve run into a prob

Answer 1

Using position: relative sets up a new z-index stacking context inside the relatively positioned element in IE.

Elements inside the relatively positioned element will be stacked according to their z-index, but when interacting with elements outside of the parent element, the z-index of the parent is used. This is why the popup shows below the multi-day event element (because even though there's no explicit z-index on the element, elements that come "later" in the document implicitly have a higher z-index than ones that come before)

To fix it, you can either

• Not use position-relative on the cell and position the popup relative to the entire document
• Give the container
  a higher z-index than the one later on in the document.

I've found that changing the z-index programmatically with JavaScript to be best, since it minimizes weird interactions with the rest of the page (i.e. set the z-index higher when it is opened, and reset it back to default when it is closed)

Some blog posts that talk about this problem:

• http://annevankesteren.nl/2005/06/z-index
• http://verens.com/archives/2005/07/15/ie-z-index-bug/