CSS固定定位前的内容

Question

我正在尝试使用CSS创建一个非常简单的模态框，并希望为“vignette”和主要内容使用单个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？

- Kevin Sylvestre

---

抱歉，没有注意到问题的顶部和声望值的数量... - Mr.Web

background: $white; 是什么意思？ - Mike Samuel

@MikeSamuel 这些是SASS或LESS CSS编译器变量。请参见：http://lesscss.org/ - Milche Patern

你尝试过负的 z-index 吗？ - tuespetre

@MilchePatern，有点奇怪。这是一种为了防止“黑”和“白”的定义改变而进行的未来保护吗？ - Mike Samuel

Answer 1

有一个技巧可以通过单个元素使整个页面变暗：

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

或者

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

所以它不是站在下面，而是围绕着。

- G-Cyrillus

---

透明的颜色可能对访问者来说不那么“惊人”，因此他仍然知道自己没有离开页面，而只是打开了一个模态/对话框。 - G-Cyrillus

Answer 2

你至少不能用跨浏览器代码实现这一点。伪元素如:before和:after在从父元素开始的另一个堆栈上。

这在CSS规范文件中有说明：

:before和:after伪元素与其他框（如run-in框）交互，就像它们是插入其关联元素内部的真实元素一样

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

- BebliucGeorge

---

但是它们仍然可以通过负 z-index（http://www.w3.org/TR/CSS21/visuren.html#stack-level）移动到父元素的*内容*下方。它们只是不能放置在父元素的背景和边框下面...但这可以通过一些方法解决。 - Ilya Streltsyn

尝试使用content: " "; - Roman Filippov

Answer 3

这里涉及到所谓的堆叠上下文。每个定位元素为其定位后代建立堆叠上下文，因此具有正 z-index 的这些后代会出现在它们的父元素之上，而不考虑父元素本身的 z-index。

要将后代移动到父级以下，可以使用负 z-index（例如 z-index：-1）。但即使使用负 z-index，定位的子元素也无法移动到父元素的背景下面（这是标准中比较反直觉的部分，但就是这样工作的）。这就是为什么您需要两个伪元素——一个用于小插图，另一个用于模态框本身的背景。

示例：http://jsbin.com/ajarey/5/edit

- Ilya Streltsyn