负边距、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），您必须指定除 static（默认值）之外的 position 属性。

因此，请更改 z-index 和 position CSS 属性。

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