CSS之前固定的位置

我想在CSS中創建一個非常簡單的模式，並希望使用單個DOM元素的'小插曲'和主要內容。因此，到目前爲止，我有：CSS之前固定的位置

<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的情況下強制執行它？

來源

2013-07-04 Kevin Sylvestre

2個不同的divs呢？在這種情況下，我不認爲「之前」適用。像「modal-bg」e「modal」 –

@NDLombardi謝謝。我知道它可以用兩個div來完成，但我很好奇它是否也可以用一個div來完成。部分原因是我計劃堆疊它們。謝謝。 –

對不起，沒有注意到問題的頂部和信譽的數量... –

你不能這樣做，至少不能使用跨瀏覽器的代碼。僞元素如：before和：after位於從父元素開始的另一個堆棧上。

這在CSS規範文件指出：

的：before和：after僞元素的元素與其他盒，如插入磨合盒，好像他們是真正的元素進行交互只是他們的相關元素

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

來源

2013-07-04 21:57:43 BebliucGeorge

但是它們仍然可以向下移動到具有負z-索引（http://www.w3.org/TR/CSS21/visuren.html#stack-level）的父元素的* content *之下。它們不能放在父元素的背景和邊界之下......但這可以解決。 –

裏面它是關於所謂的stacking context。每個定位的元素爲其定位的後代建立堆疊上下文，所以具有正z-索引的這樣的後代出現在它們的父代之上，而不管父代本身的z-索引。

要將後代移動到父代下方，可以使用負z-索引（例如z-index：-1）。但即使使用負Z指數，被定位的孩子也不能移動到父元素的背景之下（這是標準的反直覺部分的一種，但它是有效的）。這就是爲什麼你需要兩個僞元素 - 一個用於小插曲，一個用於模態本身的背景。

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

來源

2013-07-04 22:17:02

有一個竅門，你可以用它來從一個單一的元素blakken所有頁面：

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

或

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

所以它不底下站着，但各地。

來源

2013-07-04 22:40:42

透明顏色對訪問者來說可能不太「令人驚訝」，所以他仍然知道他沒有離開頁面，而只是打開了一個modale /對話框。 –

CSS之前固定的位置

回答

相關問題