путаница с z-индексом в IE

Question

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

РЕДАКТИРОВАТЬ: С помощью я исправилпроблема, но не в IE7 или ниже.

Кто-нибудь есть идеи ??

HTML

<div>

    <div>
        <img src="/bc.jpg" width="54" height="54" id="bc-icon" alt="test1" />
        <span><strong>test1</strong><br />dfgsertsrytwsertyrtyrsty</span>
    </div>

    <div>
        <img src="/bb.jpg" width="54" height="54" id="bb-icon" alt="test2" />
        <span><strong>test2</strong><br />dsfgsdfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

    <div>
        <img src="/rd.jpg" width="54" height="54" id="rd-icon" alt="test3" />
        <span><strong>test3</strong><br />dfgdfgdsfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

    <div>
        <img src="/bl.jpg" width="54" height="54" id="bl-icon" alt="test4" />
        <span><strong>test4</strong><br />dsfgsdfgsdfgsdfgsdfgsdfg</span>
    </div>

</div>

CSS

div {clear:both; padding:0 0 8px 0; border:none; width:576px;}

div div { float:left; margin: 0 8px 0 0; padding:0; width:56px; clear:none; overflow:visible; position:relative; background-color:#B22222;}       

div div img { padding:1px; cursor:pointer; display:block;}

div div span { background-color:#89A7BA; position:absolute; bottom:26px; left:-19px; padding:5px 10px; font-family:'MS Sans Serif',Geneva,sans-serif;  border:2px solid #FFF; font-size:12px; display:none;}

div div span img { position:absolute; bottom:-18px; left:34px;}
div div span strong {font-size:14px; text-transform:uppercase;}

и jqueryсоздать всплывающие окна ...

$.fn.hoverAnimation = function() {
    return $(this).each(function() {
        return $(this).hover(function() {
            $(this).find("span").slideDown(100);
            $(this).css("background-color", "#000");
        }, function() {
            $(this).find("span").slideUp(100);
            $(this).css("background-color", "#B22222");
        });
    });
}

$("div > div").hoverAnimation();

плюс я настроил его в jsfiddle здесь

Answer 1

Вы совершенно правы - IE7 не будет работать правильно. Проблема в том, что IE7 разрабатывает z-индексы на основе z-индексов содержащих элементов, которые необходимо явно установить. Каждый раз, когда вы position что-то будете влиять на свой z-индекс. Это ставит вас в небольшое затруднение. Обычно вы устанавливаете родительский элемент на position:relative; z-index:1 для сброса z-индексации, но это не сработает в вашем случае, так как вам нужно установить его на первый div и все дочерние div (так как вы используете position: relative на этих ). Когда вы устанавливаете его на дочерние элементы div, они начинают новый стек z-index, который оставляет вас в том же затруднительном положении.

Но у меня есть потенциальное решение. Устанавливайте position: relative для дочерних элементов div только во время запуска jQuery. См. этот пример

Answer 2

решение вашей проблемы больше не должно быть хорошо

span {z-index:200}

рабочая копия здесь

http://jsfiddle.net/dfgsH/