负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);
}

但是，当我向背景图像添加背景图像时，它会在背景下消失。我尝试设置一个正面的z-index，而不是在页面中的所有内容上呈现，如中心框架，顶部栏等。查看图片：

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

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

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

Answer 1

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

搜索位置：固定以及如何在绝对或固定的坐标中确定元素的大小。另请参阅设置仅包含1行文本的1个元素的高度。

Answer 2

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

Answer 3

将z-index值放在高范围

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