Having trouble with absolute positioning / Z-Index

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 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;">&nbsp;<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!

Answer 1

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...

Answer 2

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 3

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 4

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 5

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!