Comment puis-je forcer cet index z?

Question

Sur euroworker.no/order (ajouter quelque chose au panier avec Kjøp et Handlevogn).

J'ai une info-bulle qui montre l'image du produit lorsque vous passez le nom du produit, pour une raison quelconque, au-dessus du nom, mais sous d'autres éléments, comme des lignes et d'autres noms de produits.

L'index z a été défini sur le plus haut disponible pour cette partie du site, 999 ;. Rien d'autre n'a un indice plus élevé que celui-ci.

JSFiddle of the tooltip code here.

Et comment puis-je obtenir l'info-bulle au milieu? J'ai essayé right:50%; mais devinez que ce n'est pas correct.

Merci.

Note: Je suis conscient que je dois changer une pièce d'identité aux classes de :)

Answer 1

Vous pouvez centrer si vous définissez:

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

arrière-plan est un peu plus:

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

Je l'ai essayé sur votre site et cela a bien fonctionné.

Answer 2

Je ne sais pas si cela est une faute de frappe dans votre question, mais un z-index n'est pas réglé avec des pixels. Il devrait être:

z-index: 999;