title: negative z-index disappears under background
body: <p>I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.</p>
  
  <p>I have my content in <code>&lt;div id='centerframe'/&gt;</code> and I thought that a good solution was to use an absolute positioned div for the "paper".</p>
  
  <p>So I wrote the css rules as follows:</p>
  
  <pre><code>div#center_background
  {
      z-index:-1;
      position:absolute;
      top:0;
      left:130px;
      width:900px;
      height:100%;
      background:rgba(255,255,255,0.9);
  }
  </code></pre>
  
  <p>However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture: </p>
  
  <p>
  <kbd><a href="https://i.stack.imgur.com/A9Pnu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A9Pnu.png" alt=""></a></kbd></p>
  
  <p>A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use <code>position:absolute;</code>'s as little as possible.</p>
  
  <p>So how can I define this kind of background div without changing other elements' positions and z-indices?</p>
  
  <p>I made a <a href="http://jsfiddle.net/AuWrE/" rel="nofollow noreferrer">fiddle</a>, but it runs as expected. The strange thing in my real code is, when I load the page, the <code>center_background</code> div appears on top of background of body for a glance, then it disappears.
  I don't change anything with JavaScript.</p>