负的z-index在背景下消失了

Question

我想实现一个 div，它看起来像一张高而窄的纸，就像笔记本纸一样。

我将我的内容放在 <div id='centerframe'/> 中，我认为一个好的解决方案是使用绝对定位的 div 来制作“纸”。

所以我编写了以下 css 规则:

div#center_background
{
    z-index:-1;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    background:rgba(255,255,255,0.9);
}

然而，当我给 body 添加背景图片时，它却消失在背景下面。我尝试设置一个正的 z-index，但它会渲染在页面上的所有元素之上，如 centerframe、topbar 等。请见下图：

一个解决方案是为所有元素设置z-index，但我不想这样做，因为我尽可能地少使用position:absolute;。

那么，我如何定义这种背景div而不改变其他元素的位置和z-index？

我制作了一个fiddle，但它的运行结果与预期相同。在我的真实代码中，奇怪的是，当我加载页面时，center_background div会在一瞥之间出现在body的背景上，然后消失。我没有用JavaScript更改任何内容。

- jeff

---

body 元素的 background-image 总是位于其他所有元素后面 - body 是底部元素（除了 html），请您能否发布更多 CSS 和 HTML，或创建一个 fiddle。 - Pete

我也是这样期待的。好的，我会在几分钟内创建一个 Fiddle。 - jeff

好的，我明白了，你在这里滥用绝对定位。不要使用z-index-1，而是为header使用z-index:1，为center_bg使用z-index:0。至少这会给人们一个理解如何使用z-index的提示。干杯！ - G-Cyrillus

那么增加所有 z-index，使它们都变成正数，这样就解决了问题吗？ - jeff

Answer 1

我几天前在自己的代码中遇到了这个问题，将包含元素设置为position: relative解决了这个问题。

- MassivePenguin

---

谢谢！但在我的情况下，包含元素是body，将position：relavite设置为body并没有帮助。 - jeff

Answer 2

当我看到你的图片时，我认为绝对定位是不必要的。你可以使用固定定位来设置标题，并让主要内容滑动在其下方：
http://jsfiddle.net/jgYXr/

body {
    background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    line-height:3em;
    background:tomato;
    box-shadow:0 0 1em 0.5em;
    text-align:right;
}
a {
    display:inline-block;
    margin:0 0.5em;
    padding:0 0.25em;
}
main {
    width:80%;
    background:rgba(255, 255, 255, 0.75);
    box-shadow:0 0 1em 0.3em;
    margin:2em auto;
    min-height:800px;
}

<nav> 
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
  <a href="#">Nav link</a>
</nav>
<main>
</main>

搜索 position: fixed 以及如何通过坐标设置绝对或固定元素的大小。还要注意设置只有一行文本的元素的高度。

- G-Cyrillus

---

position:fixed对于头部来说是一个很好的主意。但仍然不能解决我的问题。中心背景仍然在body的背景下面。 - jeff

哇，抱歉我没有好好读你的代码。我应用了那个<main/>标签，现在它运行得很好。还有，你是怎么居中的？你能解释一下“margin:2em auto;”中的“auto”是什么意思吗？谢谢！ - jeff

margin: 3em auto; 告诉我们：第一个值是距离顶部和底部的距离。第二个值是自动，仅用于水平方向，如果父容器较小，则会在每侧保持相同距离的平衡。对于垂直边距，自动变为0。 - G-Cyrillus

哦，我明白了。非常感谢！我接受你的答案作为正确答案。但还是要感谢大家！ - jeff

Answer 3

将 z-index 值设定为较高的范围。

  div#center_background
    {
    z-index:100;
    position:absolute;
    top:0;
    left:130px;
    width:900px;
    height:100%;
    }

- manoranjani.a

---

但这会导致它出现在所有东西的顶部，而我不想要这样。 - jeff

也许如果您提供您正在尝试的代码，我们可以告诉您出了什么问题。 - G-Cyrillus

先生Cengiz Frostclaw，还好吗？在使用那个脚本时出了什么错误？ - manoranjani.a