title: CSS Place one div directly over another
body: <p>I have a div which has some stuff in it, and the user has the option of clicking an 'x' to say "This is not applicable to me", for example.</p>
  
  <p>Rather than delete the div, I want to play a translucent div on top of it.</p>
  
  <p>I started off with some complicated javascript to determine the size and location of my div in question, and create a new one on top of it. The script was giving a size and location which looked approximately right to my eye, but the overlap div was being put in the wrong spot.</p>
  
  <p>Then I realised that there is (probably) a much simpler way to do this.</p>
  
  <p>I put a div with class "blackout" <em>inside</em> the div I want to black out. The blackout css class has a visibility set to hidden, so javascript will set that to visible when needed.</p>
  
  <p>The issue I'm having is that even with this method, I can't seem to get it to precisely fill the rectangle the parent div has.</p>
  
  <p>I had</p>
  
  <pre><code>.blackout
  {
    position: absolute;
  
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
  
    background-color: black;
  
    opacity: 0.5;
    filter: alpha(opacity = 50);
  }
  </code></pre>
  
  <p>This filled up the whole screen rather than just the parent div.</p>
  
  <p>What do I need to change to make it fill the parent div only?</p>