html - 具有负 z-index 的固定 block 与主体背景重叠

Question

我有一个固定定位和负 z-index 的 block ，我想在主体后面:

html, body {
    min-height: 100%;
}
body {
    position: relative;
    background: green;
}
.sidebar {
    z-index: -999;
    position: fixed;
    top: 0; right: 0;
    min-height: 100%; width: 200px;
    background: red;
}

http://jsfiddle.net/3kcqfbuv/

但是，由于我不知道的原因，它位于正文内容的后面，但与明确定义的正文背景保持重叠。有什么办法可以解决吗？

Answer 1

Body 不是可以与任何其他层重叠的实际层...

解决您想要的问题的一个解决方案是创建另一个 div 层作为您的桌面/正文。

<style>
html, body, .desktop {
    min-height: 100%;
}
.desktop {
    background: green;
    position:absolute;
    top:0;left:0;
    width: 100%;
}
.sidebar {
    z-index: -999;
    position: fixed;
    top: 0; right: 0;
    min-height: 100%; width: 200px;
    background: red;
}
</style>

<div class="desktop">
  <div class="content">
    Pellentesque mollis diam at egestas lacinia. In a pharetra risus. Aenean in libero. 
    Nam sollicitudin at erat quis maximus. Nam aliquet ornare nibh, sit amet.
  </div>
</div>

<div class="sidebar"></div>