Отрицательное поле, z-index и блокировка кликов

Question

Я использую отрицательные поля для размещения двух столбцов:

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

К сожалению, в Opera 10.54, Safari 4 и FF 3+ ​​этот флажок не активируется, поскольку #right-column захватывает щелчок до того, как он распространяется до флажка.

Я пытался манипулировать z-index, но безуспешно.

Есть идеи, как заставить это работать?

Answer 1

При изменении свойства позиционирования в CSS (например, top, left, bottom, right или z-index) необходимо указать свойство position, отличное от static (по умолчанию).

Поэтому измените свойства CSS z-index и position.

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