title: CSS positioning: absolute/relative overlay
body: <p>I've created the following to illustrate my question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
      background-color:white;
      position:relative;
  }
  #absolute{
      position:absolute;
      height:100%;
      width:100%;
      background-color:black;
  }
  
  #relative{
      position:relative;
      background-color:blue;
      width:200px;
  }
  
  #content{
      background-color:green;
      height:50px;
      width:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
   &lt;div id="absolute"&gt;&lt;/div&gt;
   &lt;div id="relative"&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So I understand the following:
  1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.</p>
  
  <p>2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.</p>
  
  <p>What I don't understand is:
  1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
      position:relative;
  }
  
  #absolute{
      position:absolute;
      height:90%;
      width:100%;
      background-color:black;
      z-index:1;
  }
  #relative{
      //position:relative;
      background-color:blue;
      width:200px;
      z-index:2;
      color:white;
  }
  
  #content{
      background-color:green;
      height:50px;
      width:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
   &lt;div id="absolute"&gt;&lt;/div&gt;
   &lt;div id="relative"&gt;
    &lt;div id="content"&gt;Test&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
      background-color:white;
      position:relative;
  }
  #absolute{
      position:absolute;
      height:100%;
      width:100%;
      background-color:black;
      color:white;
      z-index:2;
  }
  
  #relative{
      position:relative;
      background-color:blue;
      width:200px;
  }
  
  #content{
      background-color:green;
      height:50px;
      width:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
   &lt;div id="absolute"&gt;
          Test&lt;br/&gt;Test&lt;br/&gt;Test&lt;br/&gt;Test
   &lt;/div&gt;
   &lt;div id="relative"&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.</p>