添加背景顏色以標記'html'中斷z-index？

我已經欠限定以下類型：添加背景顏色以標記'html'中斷z-index？

html { 
    background-color: @playGreen; 
} 

body { 
    background-color: @background; 
    background: url(../images/pattern/cream_dust.png) repeat 0 0; 
} 

.backStripe { 
    background-color: @playGreen; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 125px; 
    z-index: -9; 
}

以我的HTML代碼我有（不相關的元件已刪除）：

給定的CSS的想法是設定一個固定大小的彩色條紋作爲背景使用與position: absolute和低z-index股利。

如果我沒有添加任何樣式到html（標籤本身），它會按預期工作。但是，如果我將background-color添加到html（爲了避免在短頁面底部出現空白），那麼backStripe div將不再顯示，它會完全隱藏。

有關爲什麼？我怎樣才能讓div在background-color上工作html？

來源

2013-02-21 Pere Villega

在html上添加一個半透明背景色'rgba（）'，你會發現'.backStripe'仍然在這裏... *在頁面下面。 – FelipeAls 2013-02-21 22:41:28

@FelipeAls是的，我的問題是更多的如何避免它被隱藏 – 2013-02-21 22:43:53

你可以玩['background-size']（http://caniuse.com/#search=background-size）（和多個背景'body'），但它與IE9 +兼容。這是Thierry J. Koblentz撰寫的[理解z-index的最終工具]（http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp）和MDN的參考文章：[瞭解z-index]（https ：//developer.mozilla.org/en-US/docs/CSS/Understanding_z-index）。你的腦袋至少會爆炸一次^^然後[IE]（http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/）...（頭部爆炸幾次） – FelipeAls 2013-02-21 22:57:59

您已經給.backstripe a 負數 z-index。這就把它放在下的 html元素。如果html元素不透明，它將隱藏.backstripe元素。

堅持正向z-索引。

來源

2013-02-21 22:49:10 Quentin

添加背景顏色以標記'html'中斷z-index？

回答

相關問題