title: Opaque Progress bar on top of overlay
body: <p>I have a progress bar that needs to be on top of an overlay, here is the broken <a href="http://jsfiddle.net/Qpv4E/1/" rel="nofollow"><strong>jsfiddle</strong></a></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="overlay mouse-events-off"&gt;
      &lt;div class="progress progress-striped active"&gt;
          &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; /* also -moz-opacity, etc. */ z-index: 100; }
  .progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }
  </code></pre>
  
  <p>The progress bar is also at 20% opacity.</p>
  
  <p>I have a fix by just placing the <code>&lt;div&gt;</code> that carries the progress bar outside of the overlay it works. But seems like extra mark-up</p>
  
  <p>Working Markup:</p>
  
  <pre><code>&lt;div id="progress" style="display:none;"&gt;
      &lt;div class="progress progress-striped active glow"&gt;
          &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="overlay mouse-events-off"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a more elegant way to solve this with just CSS?</p>