Проблемы с абсолютным позиционированием /Z -Index со списками и таблицами в IE 6 и 7

Я создаю прототип календаря на основе CSS/XHTML, который в конечном итоге будет создан с помощью PHP для системы управления контентом Simple Updates. У меня возникла проблема с использованием абсолютного позиционирования, чтобы создать всплывающее окно, в котором будут отображаться все события за один день, когда в ячейке будет больше, чем будет. Проблема может быть видна здесь:

http://sutest.bravehost.com/

Как вы можете видеть, всплывающее окно появляется под многодневным событием и датой в IE7 и IE6. Постановка z-индекса во всплывающее окно исправила проблему в Firefox. Я попытался поместить во всплывающее окно все виды значений z-index, изменив свойство отображения всплывающего окна и связанного с ним элемента, а также множество других разнообразных подходов, без каких-либо успехов.

HTML выглядит следующим образом:

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

Это ячейка из таблицы с жестко запрограммированным всплывающим окном. Первый список содержит нормальные видимые события. Разделение, содержащее второй div, является всплывающим. Он должен отображаться в течение многодневного события:

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

Я использую элементы списка, чтобы "подделать" многодневное событие. Ли в этот день стилизован как часть панели, отображаемой для всплывающего окна в IE 6 и 7.

CSS, относящийся к всплывающему окну:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

И для многодневного события:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

Я пытался исправить эту проблему, неоднократно повторяя Google и пробую другие сайты Q & A.

Любая помощь будет принята с благодарностью!

ОТВЕТЫ

Ответ 1

С помощью position: relative настраивается новый контекст укладки z-индекса внутри относительно позиционированного элемента в IE.

Элементы внутри относительно позиционированного элемента будут уложены в стеке в соответствии с их z-index, но при взаимодействии с элементами вне родительского элемента используется z-index родительского элемента. Вот почему всплывающее окно отображается под многодневным элементом события (потому что, хотя в элементе нет явного z-index, элементы, которые появляются "позже" в документе, неявно имеют более высокий z-index, чем тот, который предшествует)

Чтобы исправить это, вы можете

  • Не использовать position-relative в ячейке и поместить всплывающее окно относительно всего документа
  • Дайте контейнеру <div> более высокий z-index, чем тот, который был позже в документе.

Я обнаружил, что с помощью JavaScript лучше изменить z-index с помощью JavaScript, поскольку он минимизирует странные взаимодействия с остальной частью страницы (т.е. установите z-index выше, когда он открыт, и reset он вернется назад по умолчанию, когда он закрыт)

Некоторые сообщения в блоге, которые говорят об этой проблеме:

Ответ 2

Если вы делаете эту таблицу с некоторым языком программирования, таким как PHP,.NET и т.д.

Вы можете сделать что-то вроде этого:

Подсчитайте общие строки таблицы, затем запустите Z-Index с этой суммой, а затем уменьшите счетчик до последней строки. При этом ваша первая строка будет иметь наибольший z-индекс и последнюю строку te ниже.

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

Ответ 3

Возможно, вы захотите попробовать установить z-индекс содержащего элемента. Таким образом, ваш popup будет иметь z-индекс 1 (или 2), и ваш контейнер будет иметь z-индекс 0 (или 1).

Ответ 4

Не уверен, что это поможет, но свойство z-index применяется к позициям, относительным, абсолютным, фиксированным http://www.w3schools.com/Css/pr_pos_z-index.asp

Изменить: это означает, что элемент li может полностью игнорировать его...

Ответ 5

Пробовали ли вы поместить нижний индекс z в многодневные элементы события и даты, чем z-индекс во всплывающем div? Кроме того, убедитесь, что любой элемент с атрибутом z-index имеет положение: абсолютное (поэтому, возможно, придется немного поиграть с макетами).