¿Cómo pongo un div por encima de otros?

[matheus_rostenkowski]

Muy buenas a todos!

Tengo un slideshare que pasa progresivamente las fotografías.
Dentro de cada foto, he añadido un enlace hacia su respectivo contenido, el problema está en que durante el estado "visibility:hidden" las fotografías se me superponen al enlace en sí mismo impidiendo que este se active.

¿Cómo podría conseguir que este div se superponga siempre?

Este es mi código.

Código HTML:

<div id="slideshow">
        <div class="img" id="img-0" style="z-index:0;">
            <img src="slide/img/img01.jpg" width="550" height="350" />
            <div class="text_link">
            	<a href="#">DESCARGAR DISCO</a>
                <p>Descarga gratis Torsión Mudial</p>
            </div>
        </div>
          
        <div class="img" id="img-1" style="z-index:10;">
            <img src="slide/img/img02.jpg" width="550" height="350" />
            <div class="text_link">
            	<a href="#">DESCARGAR DISCO</a>
                <p>Descarga gratis Torsión Mudial</p>
            </div>
        </div>
          
        <div class="img" id="img-2" style="z-index:20;">
            <img src="slide/img/img03.jpg" width="550" height="350" />
            <div class="text_link">
            	<a href="#">DESCARGAR DISCO</a>
                <p>Descarga gratis Torsión Mudial</p>
            </div>
        </div>
          
        <div class="img" id="img-3" style="z-index:30;">
            <img src="slide/img/img04.jpg" width="550" height="350" />
            <div class="text_link">
            	<a href="#">DESCARGAR DISCO</a>
                <p>Descarga gratis Torsión Mudial</p>
            </div>
        </div>
        
        <div class="img" id="img-4" style="z-index:40;">
            <img src="slide/img/img05.jpg" width="550" height="350" />
            <div class="text_link">
            	<a href="#">DESCARGAR DISCO</a>
                <p>Descarga gratis Torsión Mudial</p>
            </div>
        </div>
          
        <div id="rapidlinks-btns">
            <div class="rapidlink-selected" id="rapidlink-0">
                <a href="javascript:userChangeRapidLink('0');">
                    <img height="15" src="slide/gui/blank.png" width="15" />
                </a>
            </div>
              
            <div class="rapidlink" id="rapidlink-1">
                <a href="javascript:userChangeRapidLink('1');">
                    <img height="15" src="slide/gui/blank.png" width="15" />
                </a>
            </div>
              
            <div class="rapidlink" id="rapidlink-2">
                <a href="javascript:userChangeRapidLink('2');">
                    <img height="15" src="slide/gui/blank.png" width="15" />
                </a>
            </div>
              
            <div class="rapidlink" id="rapidlink-3">
                <a href="javascript:userChangeRapidLink('3');">
                    <img height="15" src="slide/gui/blank.png" width="15" />
                </a>
            </div>
            
            <div class="rapidlink" id="rapidlink-4">
                <a href="javascript:userChangeRapidLink('4');">
                    <img height="15" src="slide/gui/blank.png" width="15" />
                </a>
            </div>
        </div>
    </div> 

aquí el css

Código HTML:

#slideshow {
    width:550px;
    height:350px;
	margin:0 auto 0 auto;
	position:relative;
	overflow:hidden;
    top:0px;
    left:0px;
}

#slideshow .img {
    width:100%;
    height:100%;
    position:absolute;
    visibility:hidden;
    top:0px;
    left:0px;
    float:right;
}

#slideshow #rapidlinks-btns {
    width:150px; 
    height:15px;
    left:420px; 
    top:320px;
    position:absolute;
    z-index:60;
    float:right;
}

#slideshow #rapidlinks-btns .rapidlink,
#slideshow #rapidlinks-btns .rapidlink-selected {
    width:15px;
    height:15px;
    float:left;
    margin-right:5px;
}

#slideshow #rapidlinks-btns .rapidlink:hover,
#slideshow #rapidlinks-btns .rapidlink-selected {
	background-image:url(../gui/blank2.png);width:15px; height:15px;
	background-repeat:no-repeat;
}

#rapidlinks-btns .rapidlink a,
#rapidlinks-btns .rapidlink-selected a,
#rapidlinks-btns .rapidlink a img,
#rapidlinks-btns .rapidlink-selected a img {
    text-decoration:none;
    border:none;
}

/*-----------------------------------*/
/*----- ENLACE POR PÁGINA -----------*/

.text_link{
	width:550px;
	height:75px;
	background-color:;
	text-align:center;
	float:left;
	position:absolute;
	top:220px;
    left:-2px;
    float:right;
	border:dashed 2px #FFFFFF;
	}

.text_link a{
	font-family:'Roboto Condensed', sans-serif;
	font-weight:600;
	font-size:2em;
	text-decoration:none;
	color:#FFF;
	}
	
.text_link a:hover{
	text-decoration:underline;
	}
	
.text_link p{
	font-family:'Roboto Condensed', sans-serif;
	font-size:1.5em;
	margin-top:-5px;
	color:#FFF;
	}

Gracias de antemano

[pzin]

Es que visibility: hidden sólo oculta la visibilidad del elemento, por lo tanto seguirá ahí. Entonces o bien le pones un display: none o le pones una posición diferente a estática para jugar con su z-index.