title: Use CSS and z-index to create a page overlay, then place one element on top of the overlay
body: <p>How can I place an overlay over my page, while selecting specific elements to be placed on-top of the overlay?</p>
  
  <p>For example, place a dark overlay over your entire page and let a button be on top of it.  This will highlight the button.   You can see a demo of this effect used in <a href="http://usablica.github.io/intro.js/" rel="nofollow">intro.js</a></p>
  
  <p><strong>What I've tried:</strong></p>
  
  <p>I tried it in this <a href="http://jsfiddle.net/4ne83oa4/1/" rel="nofollow">jsfiddle</a>, but it didn't work.</p>
  
  <p>Basically I make an overlay div by doing <code>position: fixed; z-index: 100;</code>, and let one element shine through it by giving it <code>position: relative; z-index: 101;</code>. But for some reason, my inner div still shows up below the overlay instead of ontop, despite having a higher z-index than the overlay.</p>
  
  <p>How can I position these elements so <code>inner</code> appears ontop of <code>overlay</code>?</p>
  
  <p><strong>How introJS seems to work... against the z-index spec</strong></p>
  
  <p>IntroJS has an overlay with z-index: 99998, then the highlighted element has classes applied to it that give it <code>position: relative; z-index: 99999;</code>. We wouldn't think this would work, given how stacking works... but it does.</p>