marge négative, z-index, puis cliquez sur le blocage

Question

J'utilise des marges négatives pour la mise en page deux colonnes:

<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;} 

Malheureusement, dans Opera 10.54, Safari 4 et FF 3 +, la case à cocher n'est pas cliquable car le #right-column capture le clic avant qu'il se propage jusqu'à la case à cocher.

J'ai essayé de manipuler l'index z mais pas de chance.

Une idée comment faire pour que cela fonctionne?

Answer 1

Lorsque vous modifiez une propriété de positionnement en CSS (comme top, left, bottom, right ou z-index) vous devez spécifier une propriété position autre que static (la valeur par défaut).

Changez donc les propriétés CSS et position ainsi que les propriétés CSS .

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