title: Relative/Absolute positioning inside container
body: <p>I am trying to position some divs inside another container,
  When I set <code>position: relative;</code> on those divs they are drawn inside the container but when I add the <code>top</code> and <code>left</code> style properties, they aren't drawn correctly</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;table style="background:black;width:80%;height:90%;"&gt;
      &lt;tr&gt;
          &lt;td style="background:yellow;width:15%"&gt;Left Pane&lt;/td&gt;
          &lt;td style="background:black;width:85%"&gt;
              &lt;div id="a" style="background:green;position:relative;top:1px;left:80px;width:20%;height:20%"&gt;a&lt;/div&gt;
              &lt;div id="b" style="background:blue;position:relative;top:10px;left:14px;width:20%;height:20%"&gt;b&lt;/div&gt;
              &lt;div id="c" style="background:red;position:relative;top:10px;left:14px;width:20%;height:20%"&gt;c&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>as you can see divs <code>#b</code> &amp; <code>#c</code> should be placed on each other because of their <code>top</code> &amp; <code>left</code> properties but they are drawn beneath each other,
  If I set <code>position: absolute;</code> they are placed on each other, but they aren't positioned according to their container but according to the screen.</p>
  
  <p>Is there any way to position the divs on top of each other according to their container?</p>