Html 负z指数在背景下消失

我正在尝试实现一个div，它看起来像一个又高又窄的页面，就像一张笔记本纸

我的内容在

中，我认为一个好的解决方案是使用绝对定位的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索引，然后将其呈现在页面中所有内容的顶部，如中心框、顶栏等。请参见图片：

一个解决方案是为所有元素设置z-index，我真的不想这么做，因为我想使用

position:absolute越少越好

那么我如何定义这种背景div而不改变其他元素的位置和z索引呢

我做了一个测试，但运行正常。在我的真实代码中，奇怪的是，当我加载页面时，
center\u background
div出现在主体背景的顶部，看一眼，然后它就消失了。
我不会用JavaScript更改任何内容。
将z索引值设置为高范围

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

当我看到你的照片时，我认为绝对定位是不必要的。
您可以使用fixed作为标题，并让主要内容在标题下滑动：




搜索位置：固定以及如何在绝对坐标或固定坐标中调整元素的大小。另请参见设置只有一行文本的1个元素的高度。
几天前，我在自己的代码中遇到了这个问题，将包含元素的设置为
位置：relative
解决了这个问题。
但这会导致它出现在所有内容的顶部，这是我不想要的。如果您生成了您正在尝试的代码，我们想告诉你哪里出了问题好的，森吉兹·霜冻爪先生。使用该脚本时出现了哪一个错误？主体的背景图像不总是在其他元素后面吗？主体是底部元素（除了html），请您发布更多css和html，或者创建一个我也期望的。好的，几分钟后我来拉小提琴。好的，我明白了，你在滥用绝对位置。不执行z-index-1，而是对标头执行z-index:1，z-index:0；对于中心_bg。至少它会给我们一个理解如何使用z-index的提示。干杯增加所有z指数，使它们都变为正，将解决问题？谢谢！但在我的例子中，包含的元素是body，设置position:relavite-on-body没有帮助。position:fixed-for-header是个好主意。但仍然不能解决我的问题。中心的背景还是在身体的背景下。哇，对不起，我没看懂你的代码。我应用了它，效果很好。你是怎么做到的？你能解释一下“保证金：2em自动”中的“自动”是什么吗？谢谢保证金：3em自动；告诉：第一个值：它必须保持与底部和顶部的距离。第二个值：Auto（仅用于水平）将在每一侧与父容器两侧保持相同的距离（如果较小）。对于垂直边距，自动将值设为0。哦，我看到了。非常感谢你！我认为你的答案是正确的。谢谢大家！
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>