Negative Marge, z-Index und klicken Sie auf Blockierung

Question

I negativen Margen zu Layout zwei Spalten bin mit:

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

Leider in Opera 10.54, Safari 4 und FF 3 +, das Kontrollkästchen ist nicht anklickbar, da der #right-column den Klick erfasst, bevor er sich auf das Kontrollkästchen ausbreitet.

Ich habe versucht, den Z-Index zu manipulieren, aber kein Glück.

Irgendeine Idee, wie man das zur Arbeit bringt?

Answer 1

Wenn Sie eine Positionierung Eigenschaft in CSS Sie eine position Eigenschaft, die nicht static (Standardeinstellung) angeben müssen (wie top, left, bottom, right oder z-index) ändern.

So ändern Sie die z-indexund die position CSS-Eigenschaften.

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