Как я могу заставить этот z-индекс?

Question

Вкл. euroworker.no / order (добавьте что-нибудь в корзину с помощью Kjøp и Handlevogn).

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

Для z-индекса установлено самое высокое значение для этой части сайта, 999 ;. Ничто другое не имеет более высокого индекса, чем этот.

JSFiddle кода всплывающей подсказки здесь .

А также, как я могу получить всплывающую подсказку в середине? Я пытался right:50%;, но думаю, что это не так.

Спасибо.

Примечание: я знаю, что мне нужно изменить некоторые идентификаторы на классы:)

Answer 1

Вы можете центрировать его, если установить:

width: 130px;
left: 50%;
margin-left: -65px; /* since the half of 130 is 65*/

Фон немного длиннее:

Html

<div id="JSwrap">

<div id="cart2Produkt">


<p>
    <a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo ">

        <div class="back" ><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " />
            <br />

        </div>

        Target 7050 Softphone USB Duo


    </a>
</p>

    <p>

    </p>
</div>
</div> 

Css:

#JSwrap{ /*for jsfiddle only*/
    position:absolute;
    left:100px;
    top:50px;
}

#cart2Produkt {
    /*z-index: 2000;*/
}

#cart2Produkt a.tooltip .back {
    z-index:999;
    display:block;
    position:absolute;
    left:-999px;
    opacity:0;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

#cart2Produkt a.tooltip:hover .back{
    z-index:-1;
    display:block;
    position:absolute;
    left:15px;
    opacity:1;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
    top:-35px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;

}

#cart2Produkt img {
    z-index:999;
}

Я попробовал его на вашем сайте, и он работал нормально.

Answer 2

Не уверен, что это опечатка в вашем вопросе, но z-индекс не установлен с пикселями. Должно быть:

z-index: 999;