0

我在 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 的想法是使用 divposition: absolute和 low将固定大小的彩色条纹设置为背景z-index。

如果我不向html（标签本身）添加任何样式，它会按预期工作。但是，如果我添加一个background-colorto html（以避免在短页底部出现空白），那么backStripediv 将不再显示，它会完全隐藏。

知道为什么吗？我怎样才能让 div 沿着background-colorfor工作html？

4

1 回答 1

1

你给出.backstripe了一个负的z-index。这将它放在html 元素下。如果 html 元素不透明，它将隐藏该.backstripe元素。

坚持正 z 索引。

于 2013-02-21T22:49:10.027 回答