title: z-index to hide paragraph behind other elements
body: <p>I have a paragraph (<code>.about-info p</code>) that I am trying to hide behind another element (<code>.about-container</code>). I am trying to layer the elements so that <code>.about-info p</code> appears behind <code>.about-container</code> but have been unsuccessful so far using <code>z-index</code>. </p>
  
  <p>Can you help me understand why? The <a href="http://www.californiafootgolfclub.com/dev/about/" rel="nofollow">site is here</a>. Thanks for your ideas!</p>
  
  <pre><code>&lt;div class="about-info"&gt;
     &lt;p&gt;stuff&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="about-container"&gt;
     More stuff
  &lt;/div&gt;
  
  .about-container { z-index:9999; position:relative; }
  .about-info { background-color: #d7d7d7; z-index:-700; position:relative; }
  .about-info p { z-index: -800; position:relative;}
  </code></pre>