title: Why CSS opacity is affecting div above it?
body: <p>I have overlay inside HTML element and inside that overlay I have element that contains message. But for some reson upper element gets also opacity from element under it.</p>
  
  <p>EDIT: I only have tested this with latest Firefox.</p>
  
  <p>Here is CSS example code to explain problem:</p>
  
  <pre><code>.overlay {
      z-index: 1000;
      border: medium none;
      margin: 0pt;
      padding: 0pt;
      width: 100%;
      height: 100%;
      top: 0pt;
      left: 0pt;
      background-color: #fff;
      opacity: 0.6;
      cursor: wait;
      position: absolute;
  }
  .overlay .message {
      z-index: 1001;
      position: absolute;
      padding: 0px;
      margin: auto;
      width: 30%;
      top: 15%;
      left: 30%;
      text-align: center;
      color: #fff;
      border: 3px solid red;
      background-color: #fff;
      background: fuchsia;
      font-size: 18px;
      font-weight: bold;
      padding: 5%;
  }
  </code></pre>
  
  <p>And here is HTML code:</p>
  
  <pre><code>&lt;div class="overlay"&gt;
      &lt;div class="message"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>