CSS before position fixing

Question

I am trying to create a very simple modal in CSS and would like to use a single DOM element for the vignette and the main content. So far, I:

<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 leads to the fact that the vignette is displayed on top of the modal (not behind it). How can it be forcibly reduced without creating a new div for it?

Answer 1

You cannot do this, at least not with a cross browser. The: before and: after pseudo-elements are on another stack launched from the parent element.

This is indicated in the CSS specification files:

The: before and: after elements pseudo-elements interact with other boxes, such as input windows, as if they were inserted into real elements only inside the element associated with it

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

Answer 2

This is about the so-called stacking context . Each positioned element sets a stacking context for its positioned descendants, therefore such descendants with a positive z-index appear above their parent, regardless of the z-index of the parent itself.

To move a child below the parent, you can use a negative z index (for example, z-index: -1). But even with a negative z-index, a positioned child cannot be moved below the background of the parent (a kind of counterintuitive part of the standard, but it works). That's why you will need two pseudo-elements - one for the vignette and one for the background for the most modal one.

Example: http://jsbin.com/ajarey/5/edit

Answer 3

There is one trick you could use to clear the entire page from one element:

 .modal { /* your css */ outline: solid 800px black; } 

or

 .modal { /* your css */ box-shadow: 0 0 0 800px black; } 

therefore he does not stand beneath him, but all around.