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

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>

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是小提琴链接

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的固定块与身体背景重叠

3 个答案: