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 を使用しても、配置された子を親要素の背景の下に移動することはできません (標準の直感に反する部分ですが、機能します)。そのため、 2 つの疑似要素が必要になります。1 つはビネット用、もう 1 つはモーダル自体の背景用です。

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

于 2013-07-04T22:17:02.380 に答える