我在 Less 中定义了以下样式:
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 代码中(删除了不相关的元素):
<html>
<head>[...]</head>
<body>
<div class="backStripe"> </div>
[... other code ...]
</body>
</html>
给定的 css 的想法是使用具有 position: absolute 和低 z-index 的 div 将固定大小的彩色条纹设置为背景。
如果我不向 html(标签本身)添加任何样式，它会按预期工作。但是，如果我将 background-color 添加到 html(以避免在短页面底部出现空白)，则 backStripe div 将不再显示, 它变得完全隐藏。
知道为什么吗？如何让 div 与 html 的 background-color 一起工作？
最佳答案
您已为 .backstripe 指定了 负 z-index。这将它置于 html 元素之下。如果 html 元素不透明，它将隐藏 .backstripe 元素。
坚持使用正 z 索引。
关于html - 将背景颜色添加到标记 'html' 会破坏 z-index？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15013531/