IE6 CSS Z-index - PullRequest
Новая
       47

IE6 CSS Z-index

0 голосов
/ 07 ноября 2011

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

Грубое представление о том, что у меня есть: 

<ul>
     <li>
         <a href="#"><img src="image path to swatch"></a>
        <div class="tooltip">TOOLTIP POPUP</div>
     </li>
     <li>
         <a href="#"><img src="image path to swatch"></a>
         <div class="tooltip">TOOLTIP POPUP</div>
     </li>
 </ul>

У меня довольно много таких UL, размещенных на странице.*

Грубое представление о CSS 

 ul li {
       width: 150px;
       height: 20px;
       position: relative;
 }
 div.tooltip {
       width: 300px;
       height: 300px;
       position: absolute;
       top: -20px;
       left: -20px;
       z-index: 1000;
       display: none;
 }

Я пытался заставить родительский li иметь z-индекс -1 и относительную позицию, но это также скрывает образец.Образцы генерируются динамически, и мне нужно, чтобы отдельные подсказки располагались рядом с самим образцом, поэтому я структурировал его в списке.

Я также пытался увеличить z-индекс с помощью JavaScript, когда образецнаходится наверху, так что он является самым высоким, прежде всего, но это тоже не сработало.Например: 

 $('ul li').hoverIntent(
       function(){
    $('div.tooltip', this).css('z-index', '9000');
    $('div.tooltip', this).stop(true,true).show();
},
function() {
    $('div.tooltip', this).hide();
    $('div.tooltip', this).css('z-index', '1000');
});

Кончаются идеи, так что, если кто-нибудь может помочь, пожалуйста?Спасибо.

Код можно увидеть на JS Fiddle по адресу: http://jsfiddle.net/melon/nUTgB/13/

Ответы [ 3 ]

0 голосов
/ 08 ноября 2011

Нашли способ сделать это с помощью всего лишь CSS и небольшой реструктуризации:

по этой ссылке

0 голосов
/ 23 апреля 2012

ie6 работа на позиции относительно более абсолютной

https://stackoverflow.com/a/10280332/1312610

0 голосов
/ 07 ноября 2011

Чтобы исправить множество ошибок IE z-index, помните следующее правило:

If something has a position attribute, it always needs a z-index

Это очень помогло мне в тестировании браузера. Это означает, что теги LI нуждаются в наборе z-index: 1, потому что они имеют атрибут position:relative

...