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

しかし、ボディに背景画像を追加すると、背景の下に消えてしまいます。センターフレーム、トップバーなど、ページ内のすべての上にレンダリングするよりも、正の z-index を設定してみました。画像を参照してください。

解決策は、すべての要素に z-index を設定することですが、 をできるだけ使用したくないので、これは本当にやりたくありませんposition:absolute;。

では、他の要素の位置と z インデックスを変更せずに、この種の背景 div を定義するにはどうすればよいでしょうか?

fiddleを作成しましたが、期待どおりに動作します。私の実際のコードの奇妙な点は、ページをロードするとcenter_background、ボディの背景の上に div が表示され、その後消えてしまうことです。JavaScript で何も変更しません。