hide table behind div - html

Question

I want to make a table which isn't editable under certain conditions, so I want to overlay it with a div.
Why is this not working?
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

Wrap the div and table with another div. Give the parent div position:relative;. Give the overlay div opacity: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/
And as Nerd-Herd mentioned, if all you want to do is make an input field non-editable, the correct method is to add the disabled attribute ( disabled="disabled" for XHTML)