title: opacity and z-index together?
body: <p>The following is an extract from a much larger code. My purpose is to <strong>dim</strong> the page and then produce some div on top of the dimmed page (i.e., modal dialog). However, the div on top, although having a larger z-index, is also dimmed: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body style="margin:0; padding:0;"&gt;
  
    &lt;div id="dim" style="position:fixed;
      left:0; top:0; width:100%; height:100%;
      background-color:black; opacity:0.5; z-index:100;"&gt;
    &lt;/div&gt;
  
    &lt;div id="main" style="position:relative;
      left:0; top:0; width:400px; height:200px;
      background-color:red; z-index:10;"&gt;
  
        &lt;div id="top" style="position:absolute;
          left:40px; top:20px; width:320px; height:160px;
          background-color:yellow; z-index:110;"&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>