title: Overlay input by div
body: <p>I am developing a form and in that form there's a checkbox. If I check the checkbox then the input field before the checkbox has to hide behind an opaque div, so the user can't fill it in anymore.
  But if I work with z-index the TD element changes the height.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;table class="prijzen"&gt;
  &lt;tr&gt;
  &lt;td Verhuurperiode&lt;/td&gt;
  &lt;td&gt;Prijs&lt;/td&gt;
  &lt;td&gt;Geen verhuur&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="periode_naam" style="padding-bottom:2px;"&gt;Maand:&lt;/td&gt;
   &lt;td class="periode_prijs"&gt;&lt;input type="Text" name="standaard_prijs_maand" maxlength="7"     
  size="5" class="input_prijzen"&gt;&lt;/td&gt;
  &lt;td class="geen_verhuur"&gt;&lt;div id="verbergen_prijsvak"&gt;&lt;/div&gt;&lt;div style="float:left;"&gt;&lt;input    
  type="Checkbox"&gt;&lt;/div&gt;&lt;div class="align_checkbox"&gt;&amp;nbsp;Huren per maand is niet   
  mogelijk&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.input_prijzen{
      height:17px;
      font-size:10px;
      position:relative;
      left:0px;
      top:0px;
      z-index:100;
  }
  #verbergen_prijsvak{
      position:relative;
      left:0px;top:0px;
      z-index:1;
      background-color:red;
      filter:alpha(opacity=25);
      opacity:0.25;
      width:100px;
      height:20px;
  }
  </code></pre>