Enlaces que no funcionan con la posición absoluta

Tengo un div con una posición absoluta y un div con posición relativa. El primer div contiene los enlaces y el segundo div contiene algunos contenidos que están sobre el primer div. El primer div tiene un z-index de 1, mientras que el segundo tiene un z-index de -1 y el primero div también se declara primero.Enlaces que no funcionan con la posición absoluta

Aunque, los enlaces en el primer div no se pueden hacer clic. Ahora tengo una idea, por qué esto es así.

Fiddle

Tanto side1 y side2 tendrá una imagen de fondo. Y el contenido debería aparecer por los lados, pero los enlaces aún deberían funcionar.

Second fiddle

Fuente

2011-09-12 Tyilo

Con su edición, no puede hacer que funcione así con el código HTML que proporcionó, eso debería cambiar. Tienes '.side1' que debería aparecer debajo del' # contenido', pero quieres que '.side1 # books' aparezca sobre' # content' - eso no funcionará. Si mueve '# books' fuera de' .side1', se vuelve bastante fácil configurarlo (cómo creo), ¿está bien? Ver http://jsfiddle.net/3d7bc/ – Joe

Cambie .side tener z-index: 1, o cambiar #container tener lugar de margin-top: 150pxpadding-top.

#books tiene una z-index de 1, pero es el interior de un recipiente con una z-index de -1, por lo que todavía termina por debajo de la #container que tiene z-index: -1 pero obtiene rindió después de (por lo tanto en la parte superior).

Fuente

2011-09-12 00:41:24 Joe

Ver edición, por favor – Tyilo

+1 El índice z realmente funciona maravilla cuando una etiqueta a está contenida en una posición: elemento absoluto (posición: relativa de la etiqueta a era necesaria también para mi escenario). – eglasius

los enlaces no se pueden cliquear porque una etiqueta div está por sobrepasarlo.

Esta etiqueta:

<div class="side side2"></div>

dar al elemento .side2 un menor índice z para ocultarlo.

Fuente

2011-09-12 00:41:27 blejzz

Sin cambiar nada – Tyilo

En su código que tienen

  z-index: -1; 
      position: absolute;

Creo que esta es la razón. Cambiar -1 a 1 lo corrige. No estoy seguro de si me falta algo, de ser así, explíquelo en los comentarios y/o actualice la pregunta.

Fuente

2011-09-12 00:41:54 Meligy

Su primer div y su segundo div, ambos comparten la clase .side, que se define con z-index: -1. Así que ambos están en el mismo nivel de pila y el que viene último en el marcado estará encima del anterior. Todo lo que tiene que hacer es dar .side1 un índice z mayor a -1.

Fuente

2011-09-12 00:42:58 ant7

Enlaces que no funcionan con la posición absoluta

Respuesta

Cuestiones relacionadas