title: CSS Before Position Fixed
body: <p>I'm trying to create a very simple modal in CSS and wanted to use a single DOM element for the 'vignette' and the main  content. Thus far I have:</p>
  
  <pre><code>&lt;div class="modal"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.modal {
    position: fixed;
    top: 20%;
    left: 50%;
    right: 50%;
    width: 620px;
    margin: 0 -320px;
    height: 540px;
    background: $white;
    z-index: 4000;
  }
  
  /* Vignette */
  .modal:before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: $black;
      z-index: 2000
  }
  </code></pre>
  
  <p>Unfortunately this is leading to the vignette being displayed over top of the modal (not behind it as desired). How can it be forced underneath without creating a new div for it?</p>