html - 将表格隐藏在 div 后面

Question

我想制作一个在某些条件下不可编辑的表格，所以我想用一个 div 覆盖它。

为什么这不起作用？

CSS

<style type="text/css">
    #div_tabel_basisgegevens {
        background-color: red;
        float:left;
        position:relative;
        left:0px;
        top:0px;
        z-index:120;
        width:750;
        height:100px;
    }   
    #tabel_basisgegevens {
        height:100px;
        color:white;
        position:relative;
        left:0px;
        top:0px;
        z-index:2;
    }   
</style>

HTML

<div id="div_tabel_basisgegevens">
    <table id="tabel_basisgegevens">
        <tr>
            <td>
                <input type="Checkbox" id="geen_periodes" />
            </td>
        </tr>
    </table>
</div>

Answer 1

用另一个 div 包裹 div 和 table。给父 div position:relative;。给覆盖divopacity:0;position:absolute;width:100%;height:100%;

<style type="text/css">
#div_tabel_basisgegevens{
    background-color: red;
    float:left;
    position:absolute;
    left:0px;
    top:0px;
    z-index:120;
    width:100%;
    height:100%;
    opacity:0;
}    
#tabel_basisgegevens{
    height:100px;
    color:white;
    left:0px;
    top:0px;
    z-index:2;
    background:red;
}    
    #wrapper {position:relative;}
</style>
    <div id="wrapper">
        <div id="div_tabel_basisgegevens"></div>
        <table id="tabel_basisgegevens">
            <tr><td><input type="Checkbox" id="geen_periodes"></td></tr>
        </table>
    </div>

http://jsfiddle.net/RZQwb/2/

正如 Nerd-Herd 所提到的，如果您只想使输入字段不可编辑，那么正确的方法是添加disabled属性（disabled="disabled"对于 XHTML）