How can I force this z-index?

Question

On euroworker.no/order (add something to the cart with Kjøp and Handlevogn).

I have a tooltip that shows the picture of the product when you hover the product name, for some reason it shows above the name, but under other elements, like lines and other product names.

The z-index has been set to the highest available for this part of the site, 999;. Nothing else has a higher index than this.

JSFiddle of the tooltip code here.

And also how can I get the tooltip to appear in the middle? I tried right:50%; but guess that's not right.

Thanks.

Note: I am aware that I need to change some ID's to classes :)

Answer 1

Not sure if that is a typo in your question, but a z-index is not set with pixels. It should be:

z-index: 999;

Answer 2

You can center it if you set:

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

Background is a little longer:

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

I tried it on your site and it worked fine.