html - 负 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，而不是它呈现在页面中所有内容的顶部，如中心框、顶部栏等。看图片:

<知识库>

一个解决方案是为所有元素设置 z-index，我真的不想这样做，因为我想使用 position:absolute;越少越好。

那么如何在不改变其他元素的位置和 z 索引的情况下定义这种背景 div？

我做了一个fiddle ，但它按预期运行。在我的真实代码中奇怪的是，当我加载页面时，center_background div 出现在 body 背景的顶部，一目了然，然后消失了。 我不会用 JavaScript 改变任何东西。

Answer 1

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