[SOLUCIONADO] Problema con superposición de divs

[Siguana]

He desarrollado un código para generar una serie de pestañas que en realidad son divs que se ocultan o se muestran según la pestaña que se pulse, y dentro de ese div o pestaña se muestra una serie de posts de Wordpress.

El problema ha llegado cuando he descubierto que si un enlace de la primera pestaña apunta a la dirección A, pero un enlace de la tercera pestaña apunta a la dirección B, entonces el enlace de la primera pestaña "apunta" a B en vez de a A. Ésto es debido a que la estructura de ambas pestañas es idéntica, pero con diferente contenido. De igual forma, donde hay un enlace en la primera pestaña, también hay un enlace en las otras dos pestañas. De esta manera, en pantalla se ve el contenido de la primera pestaña (o de la pestaña que esté seleccionada), pero al poner el puntero sobre el enlace, la dirección que se vé es la del enlace de la tercera pestaña.

Por lo tengo, he supuesto que es un problema de superposición de capas, como si no se lograsen superponer del todo una capa sobre la otra. He probado ésto en Chrome y en Firefox y ocurre lo mismo. ¿Alguna idea de cómo solucionar este problema? Espero que se entienda mi problema.

Os adjunto copia del código de la página y de los estilos.

Archivo .php:

Código HTML:

<div id="container">
    <!--Pestaña 1 activa por defecto-->
    <input id="tab-1" type="radio" name="tab-group" checked="checked">
    <label for="tab-1">Tokio</label>
    <div class="empty">&nbsp;</div>
    <!--Pestaña 2 inactiva por defecto-->
    <input id="tab-2" type="radio" name="tab-group">
    <label for="tab-2">Metrópolis</label>
    <div class="empty">&nbsp;</div>
    <!--Pestaña 3 inactiva por defecto-->
    <input id="tab-3" type="radio" name="tab-group">
    <label for="tab-3">Otros</label>
    <hr class="blue_bar">
    <!--Contenido a mostrar/ocultar-->
    <div id="content">
        <!--Contenido de la Pestaña 1-->
        <div id="content-1">
            Posts de Wordpress
        </div>
        <!--Contenido de la Pestaña 2-->
        <div id="content-2">
            Posts de Wordpress
        </div>
        <!--Contenido de la Pestaña 3-->
        <div id="content-3">
            Posts de Wordpress
        </div>
    </div>
</div>
 

Archivo .css:

Código CSS:

#container {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 50px;
}
 
#container input {
    height: 25px;
    visibility: hidden;
}
 
#container label {
 background: #CCCCCC; /*Background color tabs*/
 color: #FFFFFF; /*Fore color tabs*/
 cursor: pointer;
 display: block;
 float: left;
 font-size: 14px;
 height: 25px;
 width: 128px;
 vertical-align: middle;
 text-align: center;
 font-family: Kozuka;
}
 
#container input:hover + label {
 background: #1b3645; /*Hover color tabs*/
 color: #FFFFFF;
}
 
#container input:checked + label {
    background: #1b3645; /*Active tab color*/
    color: #FFFFFF;
    position: relative;
    z-index: 6;
}
 
#container_flows {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 50px;
}
 
#container_flows input {
    height: 25px;
    visibility: hidden;
}
 
#container_flows label {
 background: #CCCCCC; /*Background color tabs*/
 color: #FFFFFF; /*Fore color tabs*/
 cursor: pointer;
 display: block;
 float: left;
 font-size: 14px;
 height: 25px;
 width: 128px;
 vertical-align: middle;
 text-align: center;
 font-family: Kozuka;
}
 
#container_flows input:hover + label {
 background: #1b3645; /*Hover color tabs*/
 color: #FFFFFF;
}
 
#container_flows input:checked + label {
 background: #1b3645; /*Active tab color*/
 color: #FFFFFF;
 position: relative;
 z-index: 6;
}
 
#content {
    background: #FFFFFF;
    border-radius: .25em .25em .25em .25em;
    min-height: 80%;
    position: absolute;
    width: 880px;
    padding: 11px;
    display: inline-block;
}
 
#content div {
    opacity: 0;
    position: absolute;
    overflow: visible;
}
 
#content_flows {
    background: #FFFFFF;
    border-radius: .25em .25em .25em .25em;
    min-height: 80%;
    position: absolute;
    width: 880px;
    padding: 11px;
    display: inline-block;
}
 
#content_flows div {
    opacity: 0;
    position: absolute;
    overflow: visible;
}
 
#content_tab {
    opacity: 1; /*Opaco*/
    background: #FFFFFF;
    border-radius: .25em .25em .25em .25em;
    min-height: 20em;
    position: relative;
    width: 100%;
    z-index: 6;
}
 
#container input#tab-1:checked ~ #content #content-1,
#container_flows input#tab-1-flows:checked ~ #content_flows #content-1-flows,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
    opacity: 1;
}
 
#content-1 {
    width: 95%;
}
 
#content-1 div {
    opacity: 1;
}
 
#content-1-flows {
    width: 95%;
    margin-top: 21px;
}
 
#content-1-flows div {
    opacity: 1;
}
 
#content-2 {
    width: 95%;
}
 
#content-2 div {
    opacity: 1;
}
 
#content-3 {
    width: 95%;
}
 
#content-3 div {
    opacity: 1;
}
 

[Siguana]

Finalmente, he podido solucionarlo por mi cuenta, leyendo este otro hilo de este mismo foro:

http://www.forosdelweb.com/f53/no-funciona-z-index-1153147

Simplemente añadí z-index: 100; tras la línea 123 del código .css