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

Question

我有一个固定定位和负 z-index 的块我想在主体后面：

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

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

解决您想要的问题的一个解决方案是创建另一个 div 层作为您的 desktop/body。

<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>

Answer 2

body {

    position: absolute;
    background: green;
}
.sidebar {

    position: relative;
    top: 0; right: 0;
    min-height: 100%; width: 200px;
    background: red;
}

我已经将主体位置更改为绝对位置，将侧边栏位置更改为相对位置。并从侧边栏中删除了 z-index -999...它对我有用

Here 是 fiddle link

Answer 3

抱歉，唯一的解决方案是像这样的额外包装器：fiddle

<div class="wrap">
    <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>

html, body {
    min-height: 100%;
    height: 100%;
    width: 100%;
}

.wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: green;
}

.sidebar {
    z-index: -999;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 200px;
    background: red;
}

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

Fixed block with negative z-index overlaps the body background

html

css

fixed