css - 我怎样才能强制这个 z-index？

Question

关于 euroworker.no/order (用 Kjøp 和 Handlevogn 将东西添加到购物车)。

我有一个工具提示，当您将鼠标悬停在产品名称上时，它会显示产品图片，出于某种原因，它显示在名称上方，但在其他元素(例如线条和其他产品名称)下方。

z-index 已设置为网站这部分可用的最高值，999；。没有比这更高的指数了。

JSFiddle of the tooltip code here .

还有如何让工具提示出现在中间？我尝试了 right:50%; 但我猜这不对。

谢谢。

注意:我知道我需要将一些 ID 更改为类 :)

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

我在您的网站上试过了，效果很好。