html - 负边距，z-index和点击屏蔽

我正在使用负边距来布局两列:

<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，但是没有运气。

任何想法如何使它工作？

最佳答案

当您在CSS中更改定位属性(例如top，left，bottom，right或z-index)时，您必须指定position以外的static属性(默认值)。

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

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

关于html - 负边距，z-index和点击屏蔽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3133076/