title: how to position divs within another div
body: <p>I want to position divs within another div.</p>
  
  <p>Here's the relevant snippet of css (<a href="http://cssdesk.com/uAQgD">full example on cssdesk</a>):</p>
  
  <pre><code>        .textblock-container {
              width: 500px;
              height: 500px;
              border: 1px solid red;
          }
          div.textblock {
              width: 100px;
              height: 100px;
              line-height: 100px;
              border: 1px solid black;
              position: absolute;
              text-align: center;             
              background: rgb(0, 150, 0); /* Fall-back for browsers that don't
                                  support rgba */
              background: rgba(0, 150, 0, .5);
          }
  </code></pre>
  
  <p>and the relevant snippet of html:</p>
  
  <pre><code>    &lt;div id='blockdiv1' class='textblock-container'&gt;
          &lt;div id='blockdiv2' class='textblock'&gt;&lt;span&gt;foo (NW)&lt;/span&gt;&lt;/div&gt;
          &lt;div id='blockdiv3' class='textblock'&gt;&lt;span&gt;bar (NE)&lt;/span&gt;&lt;/div&gt;
          &lt;div id='blockdiv4' class='textblock'&gt;&lt;span&gt;baz (SW)&lt;/span&gt;&lt;/div&gt;
          &lt;div id='blockdiv5' class='textblock'&gt;&lt;span&gt;quux (SE)&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the foo/bar/baz/quux blocks are positioned relative to the browser window, not to their parent element.</p>
  
  <p>What am I doing wrong and how can I fix it?</p>