7

我正在尝试在 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 的情况下将其强制置于下方？

4

3 回答 3

5

你不能这样做，至少不能使用跨浏览器代码。作为 :before 和 :after 的伪元素位于从父元素开始的另一个堆栈上。

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

:before 和 :after 伪元素元素与其他框交互，例如插入框，就好像它们是插入到相关元素中的真实元素一样

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

于 2013-07-04T21:57:43.847 回答
5

这是关于所谓的堆叠上下文。每个定位元素为其定位的后代建立堆叠上下文，因此具有正 z-index 的后代出现在其父级之上，而与父级本身的 z-index 无关。

要将后代移动到父级下方，可以使用负 z-index（例如 z-index: -1）。但即使使用负 z-index，定位的子元素也不能移动到父元素的背景下方（标准的一种违反直觉的部分，但它确实有效）。这就是为什么你需要两个伪元素——一个用于小插图，一个用于模态本身的背景。

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

于 2013-07-04T22:17:02.380 回答
5

您可以使用一种技巧来从一个元素中删除所有页面：

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

或者

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

所以它不在下面，而是在四周。

于 2013-07-04T22:40:42.027 回答