CSS до фиксации позиции

Question

Я пытаюсь создать очень простой модальный CSS и хотел бы использовать один элемент DOM для «виньетки» и основного контента. До сих пор у меня есть:

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

К сожалению, это приводит к виньетка отображается поверх модальным (не за ним по желанию). Как его можно заставить поднять, не создавая для него новый div?

Answer 1

Вы не можете сделать это, по крайней мере, не с кросс-браузерным кодом. Псевдоэлементы как: before и: after находятся в другом стеке, начатом с родительского элемента.

Об этом говорится в спецификации CSS файлах:

The: до и: после псевдо-элементов элементы взаимодействуют с другими ящиками, например, работают в коробках, как если бы они были реальными элементами, вставленных только внутри своего связанного элемента

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

Answer 2

Это о так называемой stacking context. Каждый позиционируемый элемент устанавливает контекст стекирования для своих позиционированных потомков, поэтому такие потомки с положительным z-индексом появляются над их родителями, независимо от z-индекса самого родителя.

Чтобы переместить потомка под родителем, вы можете использовать отрицательный индекс z (например, z-index: -1). Но даже с отрицательным z-индексом позиционированный дочерний элемент нельзя перемещать ниже фона родительского элемента (вид контринтуитивной части стандарта, но он работает). Вот почему вам нужно два псевдоэлементов - один для виньетки и один для фона для самого модального.

Пример: http://jsbin.com/ajarey/5/edit

Answer 3

есть один трюк можно использовать, чтобы blakken все страницы из одного элемента:

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

или

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

поэтому оно не стоять внизу, но все вокруг ,