负边距,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(默认值).

所以改变z-index 和position CSS属性.

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