Question

我在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">&nbsp;</div>
    [... other code ...]
  </body>
</html>

给定css的想法是使用position: absolute和低z-index的div将固定大小的彩色条纹设置为背景。

如果我没有向html（标签本身）添加任何样式，它将按预期工作。但是，如果我向background-color添加html（以避免短页面底部出现空白），则backStripe div不再显示，它将完全隐藏。

有什么想法吗？如何让div在background-color的{{1}}上工作？

Answer 1

您已向.backstripe提供否定 z-index。这使得html元素。如果html元素不透明，它将隐藏.backstripe元素。

坚持积极的z指数。

为标签'html'添加背景颜色会打破z-index？

1 个答案: