CSS Before Position Fixed

Question

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:

<div class="modal"></div>

.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
}

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?

Answer 1

You cannot do this, at least not with cross-browser code. Pseudo-elements as :before and :after are on another stack started from the parent element.

This is stated in the CSS specification files:

The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element

http://www.w3.org/TR/CSS21/generate.html#before-after-content