margen negativo, z-index y haga clic en el bloqueo de

Question

estoy usando márgenes negativos a disposición dos columnas:

<div id="left-column"><input type="checkbox" /></div> 
<div id="right-column"> 
    <div id="right-column-inner"></div> 
</div> 

Css:

#left-column { width: 200px; float: left;} 
#right-column { margin-left: -200px; width: 100%; float: left;} 
#right-column-inner { margin-left: 200px; float: left;} 

Por desgracia, en Opera 10.54, Safari 4 y 3 FF +, no se puede hacer clic en la casilla de verificación, ya que #right-column está capturando el clic antes de propocionarse en la casilla de verificación.

He intentado manipular el índice z pero no tuve suerte.

¿Alguna idea de cómo hacer que esto funcione?

Answer 1

Cuando se cambia una propiedad posicionamiento en el CSS (como top, left, bottom, right o z-index) tiene que especificar una propiedad que no sea positionstatic (por defecto).

Cambie las propiedades de CSS z-indexy position.

#left-column { width: 200px; float: left; position:relative; z-index:100;}