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

我在你的网站上试过它并且运行正常。

Answer 2

不确定这是否是您问题中的拼写错误，但z-index未设置为像素。它应该是：

z-index: 999;

我该怎么强制这个z-index？

2 个答案: