posición: las causas relativas se pueden anclar a los anclajes

Question

Estaba jugueteando con un sitio web que estoy desarrollando, intentando solucionar algunos errores extraños de IE7, ya que este es un proyecto interno e IE7 es el navegador estándar. Terminé añadiendo "posición: relativa" para corregir un par de problemas de diseño específicos de IE, pero parece que empeoré las cosas en FF/Chrome (me considero más como un programador de sistemas, pero mis responsabilidades actuales involucran más de una web foco desafortunadamente).

El problema específico es que los elementos de "posición: relativa" terminaron haciendo que algunos de mis enlaces, que se desplazaron a la derecha, no se puedan cliquear. Creé una página de prueba simple que espero que lo explique mejor que con palabras: http://jsfiddle.net/gBchZ/.

Eventualmente ordenaré este lío, pero esperaba que alguien pudiera explicar la razón detrás de la cual mis enlaces se ocultan detrás de la posición: elementos relativos.

Answer 1

Sin tener el enlace del sitio es difícil decir exactamente lo que está mal. Pero en cualquier caso, una solución podría ser usar z-index para el padre de a. Por ejemplo z-index:100. Tenga en cuenta que z-index funciona solo con elementos posicionados, por lo que puede usar position:relative.

de demostración basado en el ejemplo:http://jsfiddle.net/gBchZ/3/

Answer 2

Esto se debe a que .contentdiv s están cubriendo el recuadro de la derecha (en su demostración). Si se agrega una margin-right a los divs la a se convierte en 'alcanzable:'

.content 
{ 
    position: relative; 
    margin-right: 20%; 
} 

JS Fiddle demo

También es posible usar position: absolute; para hacer que el elemento de a parece 'más alto' en el z-index, aunque esto se vuelve bastante complejo :

#rightBox 
{ 
    background-color: green; 
    width: 25px; 
    height: 25px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin: -20px .5em .5em .5em; 
    padding: .5em; 
} 

JS Fiddle demo

Answer 3

@David 's correcto en que el position: relative.content sobre los puntos que les está dando un índice z, lo que significa que están ‘por encima’ del enlace' he flotado a la derecha.

creo que una solución mejor, aunque es agregar position: relative; al enlace que has flotó así, y darle un índice z mayor que .content:

#rightBox 
{ 
    ... 
    position: relative; 
    z-index: 2; 
} 

.content 
{ 
    position: relative; 
    z-index: 1; 
} 

Ver http://jsfiddle.net/gBchZ/6/