title: Overlaying DIVs with z-index
body: <p>I am trying to overlay a div over my entire page to show a pop-up. The problem is, it won't overlay over the entire page. Here is an approximation of the code:</p>
  
  <pre><code>&lt;div style="z-index:902;"&gt;
      &lt;div style="position: fixed; width: 100%; height: 100%; left: 0; top: 0;"&gt;
          Overlay
      &lt;/div&gt;
      Contents of container 1
  &lt;/div&gt;
  &lt;div style="z-index:902;"&gt;
      Contents of container 2
  &lt;/div&gt;
  &lt;div style="z-index:902;"&gt;
      Contents of container 3
  &lt;/div&gt;
  </code></pre>
  
  <p>The overlay div appears on top of container 1, but the contents of container 2 and 3 appear on top of the overlay.</p>
  
  <p>I cannot move my overlay div outside of the container 1, as I am using a CMS (DotNetNuke if that helps).</p>
  
  <p>I have tried setting the z-index of my overlay higher than the containers, but nothing is working.</p>
  
  <p>Can anyone help?</p>