title: Opacity of absolute positioned elements
body: <p>Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked. </p>
  
  <p><a href="https://dl.dropbox.com/u/88682337/cssIssue.bmp" rel="nofollow">Here</a> is a screensot of the problem.</p>
  
  <p>And below is the relevent code (ask if you need to see more)</p>
  
  <pre><code>.textPopup
  {
      width: 1400px;
      height: 600px;
      background-color: White;
      position: fixed;
      margin-left: auto;
      margin-right: auto;
      z-index: 15;
      left: 0;
      right: 0;
      top: 50px;
      bottom: 0;
      opacity: 0.2;
  }
  #innerPopup
  {
      background-color: White;
      width: 1350px;
      height: 550px;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      z-index: 15;
      left: 0;
      right: 0;
      top: 50px;
      bottom: 0;
      opacity: 1;
  }
  
  ... snip
      &lt;div id="popupShadow"&gt;
      &lt;/div&gt;
      &lt;div class="textPopup"&gt;
          &lt;div id="innerPopup"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>