title: How do I stack DIV elements on top of each other with position: relative
body: <p>I'm having a problem getting <code>div</code> elements to stack on top of each other vertically. I have a <code>mainwrapper</code> and 2 <code>div</code> elements inside them that I need to be stacked. But whenever I give the first inner <code>div</code> <code>position: absolute</code> and then <code>right: 0</code> or even <code>float: right</code>, it goes into the second <code>div</code>. Is there any way around this?</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
      &lt;div class="test1"&gt;&lt;/div&gt;
  
      &lt;div class="test2"&gt;
          &lt;div class="test3"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      width: 605px;
      margin: 0 auto;
      position: relative;
      background: transparent;
      border: 1px solid black;
      height: 240px;
  }
  
  .test1 {
      border: 1px solid black;
      width: 200px;
      height: 30px;
      display: block;
      position: absolute;
      right: 0;
  }
  
  .test2 {
      border: 1px solid red;
      width: 600px;
      height: 200px;
      display: block;
      position: absolute;
  }
  
  .test3 {
      border: 1px solid black;
      width: 100px;
      height: 20px;
      position: absolute;
      bottom: 20px;
      right: 0;
  }
  </code></pre>
  
  <p>Here is my <a href="http://jsfiddle.net/wRV6L/" rel="nofollow">jsfiddle</a>.</p>