Проблема z-индекса CSS, когда внутри ячейки таблицы

У меня есть календарь / таблица, что, когда вы навеки над каждым днем, у нас есть небольшое всплывающее окно, которое находится абсолютно под каждой ячейкой.

Чтобы сделать эту работу, я добавил в каждую ячейку

. Прекрасно работает в FF, хотя, когда вы наводите курсор на него в IE, z-index игнорируется.

введите описание изображения здесь

Я пробовал все хаки, которые я могу придумать, чтобы заставить его работать в IE 7 + 8.

Не нужно, чтобы все отдельные z-indexes на div .wrapper внутри элементов td (все они могут быть установлены на 1 я полагаю) и устанавливают следующие свойства:

 /* add these two to your selector */ #calendar tbody td { position: relative; z-index: 1; } /* create this new selector */ #calendar tbody td:hover { z-index: 2; } 

Используя средства разработки firebug и IE, мне показалось, что он работает в Firefox и IE7 и 8.

Попробуйте установить position: relative и z-index на table а также td .

Внутри вашего абсолютно позиционированного элемента hover поместите относительный позиционированный div и дайте ему индекс z как 500. Ie7 считает, что абсолютные и относительные позиционированные элементы имеют раздельные блоки z-index

  

Что-то вроде этого я догадываюсь

Я использовал это, чтобы помочь мне с аналогичной проблемой: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Если это не помогает, имеет ли значение, если вы даете самой таблице z-индекс 1 или что-то ниже?

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

На вашем примере я смог исправить проблему z-index, добавив z-index в div.wrapper внутри ячеек таблицы.

Чтобы обойти слоирование с ячейками до и после, вам придется изменить z-индекс ячеек с помощью Javascript.

Но поскольку беспорядок с z-index становится беспорядочным, лучшим решением было бы разместить все всплывающие windows вне и после таблицы. Это исправит ваши проблемы с разделением без сумасшедшего / хакерского CSS.

Проблема в том, что .hoverContent является дочерним .wrapper , вы должны переместить его так, чтобы он находился на одном уровне:

   
10£200
...

Установите td в position:relative , установите .hoverContent как position:absolute и это решит вашу проблему.

Если ваш компонент сам позиционируется абсолютно и временно отображается над другими компонентами, просто добавьте его на верхний уровень, то есть на страницу, а затем вам не нужно беспокоиться о z-порядке или типе позиции таблицы.