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

You might want to try setting the z-index of the containing element. So, your popup would have a z-index of 1 (or 2) and your container would have a z-index of 0 (or 1).

Answer 2

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 <div> 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/

Answer 3

If you are making this table with some programming language such as PHP, .NET, etc.

You can make something like this:

Count the total rows of your table, then start Z-Index with the this total, then decrease the counter until the last row. Doing this, your first row will have the greatest z-index and the last row te lower.

<table> position relative
<tr> nothing
<td> nothing
<div> position relative
<element position absolute>
</div>
</td></tr></table>

----
Table Loop:

$nZ = count($resource);
foreach($resource as $line) {
 <tr><td>
   <div style="z-index: $nZ">content</div>
 </td></tr>
 $nZ--;  // Decrement nZ
}
----

C ya!

Answer 4

Have you tried putting a lower z-index on the multi-day event and date elements than the z-index on the popup div? Also, make sure any element with the z-index attribute has position: absolute (so might have to play with layout issues a little).

Answer 5

Not sure if this will help, but the z-index property applies to items that are positioned, relative, absolute, fixed http://www.w3schools.com/Css/pr_pos_z-index.asp

Edit: Meaning that the li element might completely ignore it...