Html 在div后面隐藏表

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

为什么这不起作用

CSS

#基础设施分区表{
背景色：红色；
浮动：左；
位置：相对位置；
左：0px；
顶部：0px；
z指数：120；
宽度：750；
高度：100px；
}   
#塔伯勒·巴西格根斯酒店{
高度：100px；
颜色：白色；
位置：相对位置；
左：0px；
顶部：0px；
z指数：2；
}   

HTML

---

用另一个div包装div和表。给出父div

位置：相对。给出叠加div
opacity:0；位置：绝对位置；宽度：100%；身高：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>


#基础设施分区表{
背景色：红色；
浮动：左；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：120；
宽度：100%；
身高：100%；
不透明度：0；
}    
#塔伯勒·巴西格根斯酒店{
高度：100px；
颜色：白色；
左：0px；
顶部：0px；
z指数：2；
背景：红色；
}    
#包装器{位置：相对；}


正如Nerd Herd所提到的，如果您只想使输入字段不可编辑，正确的方法是添加
disabled
属性（
disabled=“disabled”
用于XHTML）
如果只是需要不可编辑的复选框，您可以在那里添加
disabled=“disabled”
。
<div id="div_tabel_basisgegevens">
    <table id="tabel_basisgegevens">
        <tr>
            <td>
                <input type="Checkbox" id="geen_periodes" />
            </td>
        </tr>
    </table>
</div>

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