Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7
css, css-position, html-table, list, z-index
Solution
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/
Problem
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 problem with using absolute positioning to create a popup that would show all the events in a day when there are more than will fit in a cell. The problem can be seen here: http://sutest.bravehost.com/ As you can see, the popup pops under the multi-day event and date in both IE7 and IE6. Putting a z-index on the popup fixed the problem in Firefox. I've tried putting all sorts of z-index values on the popup, changing the display property of the popup and related element, as well as many other varied approaches, with no success. The HTML is as follows: ``` <td valign="top"><div> <div class="date">25</div> <ul> <li class="single"><a href="#">History</a></li> <li class="single"><a href="#">Biology</a></li> <li class="single"><a href="#">Computers</a></li> <li class="single"><a href="#">POTCH</a></li> <li class="single"><a href="#">Precal</a></li> <li class="more"><a href="#">+3 More</a></li> </ul> <div class="popup"> <span class="close"><a href="#">X</a></span> <ul> <li class="single"><a href="#">History</a></li> <li class="single"><a href="#">Biology</a></li> <li class="single"><a href="#">Computers</a></li> <li class="single"><a href="#">POTCH</a></li> <li class="single"><a href="#">Precal</a></li> <li class="single"><a href="#">Science PC</a></li> <li class="single"><a href="#">Physics</a></li> <li class="single"><a href="#">Construction</a></li> </ul> </div> </div></td> ``` This is the cell from the table with the hard-coded popup. The first list contains the normal, visible events. The div containing the second div is the popup. It should be displaying over the multi-day event: ``` <td valign="top" class="blank"><div> <div class="date">2</div> <ul> <li style="background-color:plum;"> <img src="endr.png" alt="." /></li> </ul> </div></td> ``` I'm using list items to "fake" the multi-day event. The li in this day is styled to be the section of the bar seen to render over the popup in IE 6 and 7. The CSS relating to the popup: ``` .popup { position:absolute; top:-1px; background-color:white; border:1px solid black; overflow:visible; padding:10px; width:auto; z-index:1; margin-left:-1px; } ``` And to the multi-day event: ``` li { margin:2px 0; padding:0 0 2px 5px; white-space:nowrap; } ``` I've tried to fix this problem by searching Google repeatedly and trying other Q&A sites. Any help would be greatly appreciated!