Tooltip behind images

[jpgonc]

Hello, I am having an issue that's driving me nuts: My tooltip gets behind the images. Here's the code:

<div id="continente">
   <div class="tabbertab">
    <h2>North America</h2>
      <p class="navega">
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CA&amp;fotos=0" target="_blank"><img src="./imagens/ca.gif" alt="Canada"/><span>Canada</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CU&amp;fotos=0" target="_blank"><img src="./imagens/cu.gif" alt="Cuba"/><span>Cuba</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=MX&amp;fotos=0" target="_blank"><img src="./imagens/me.gif" alt="Mexico"/><span>Mexico</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=US&amp;fotos=0" target="_blank"><img src="./imagens/us.gif" alt="USA"/><span>United States</span></a><span>(0)</span>
............... etc... etc...
      </p>
   </div>
</div>

div#continente a.dicasp span { display: none; }
div#continente a.dicasp:hover span {
	position: absolute;
	display: block;
	left: 55%;
	top: 75%;
	background-color: #02111A;
	border: 1px solid #566670;
	padding: 5px;
	font: normal bold 16px "Nevis Bold", Tahoma, Georgia;
	color: #FFFFFF;
        width: 200px;
}
div#continente a.dicasp {
    position:relative;
    z-index:24;
}

.tabbertab {
	padding: 15px 0;
	border: 2px groove #FFFFFF;
	height: 110px; 
}

Everything works fine, but the tooltip gets behind the images that are below.
The images are 30:30 pixel with each of them with a country code and are about 160 all stacked neated in the tabbertab class. 3 rows of images. For instance, if I put the mouse pointer over the first one, the tooltip gets behind the second and all the others images.

[chrishirst]

Give the "tooltip element" a higher position in the stacking order. (z-index)

[jpgonc]

Originally Posted by chrishirst

Give the "tooltip element" a higher position in the stacking order. (z-index)

I messed around with that too, but to no avail... maybe bad CSS structuring?

[chrishirst]

Possibly, but with 160 following sibling elements in the stacking order, the z-index will need to be more than 24 to bring it to the top.