添加背景颜色以标记'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？

回答

相关问题