title: Stacking two relatively positioned divs on top of each other
body: <p>I have two divs I'd like to position on top of each other using relative positioning.</p>
  
  <pre><code>&lt;div id="display_background"&gt;
  &lt;/div&gt;
  &lt;div id="display_foreground"&gt;
      &lt;div id="home"&gt;
          This is the home page
      &lt;/div&gt;
  
      &lt;div id="info"&gt;
          This is the info page
      &lt;/div&gt;
  
      &lt;div id="contact"&gt;
          This is the contact page
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to stack them, and am using relative positioning because I want the div positions to adjust with the background image.</p>
  
  <p>Here's the css I'm using:</p>
  
  <pre><code>$('#display_background').css({
      'background-color': 'white',
      opacity: 0.5,
      position: 'relative',
      left: '66%',
      top: '66%',
      width: '425px',
      height: '330px',
      border: '1px solid'
  });
  $('#display_foreground').css({
      position: 'relative',
      left: '66%',
      top: '66%',
      width: '20%',
      height: '25%'
  });
  </code></pre>