title: Confused over DIV Z-index, plus logic of visible/hidden DIVs
body: <p>I've spent all morning trying to write what I thought was a simple bit of code.</p>
  
  <ul>
  <li>Two long columns of content, only column 1 is visible</li>
  <li>On click of a link, column 1 is hidden and column 2 becomes visible</li>
  <li>Both are in exactly the same position, however both have different and varying lengths</li>
  </ul>
  
  <p>I decided to use the <code>target</code> pseudo-class to switch between the columns, setting the visibility of one to show.</p>
  
  <p>This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.</p>
  
  <p>My two (related) issues:</p>
  
  <ol>
  <li>I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.</li>
  <li>I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.</li>
  </ol>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#container
  {
      background-color: red;
      position: relative;
  }
  
  #schools-list
  {
      width: 400px; /* Set the width of the visible portion of content here */
      height: 600px; /* Delete the height, let the content define the height */
      background-color: purple;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  #boards-list
  {
      width: 400px; /* Set the width of the visible portion of content here */
      height: 700px; /* Delete the height, let the content define the height */
      background-color: green;
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
  }
  
  #container:target #schools-list
  {
      visibility: hidden;
  }
  
  #container:target #boards-list
  {
      visibility: visible;
  }
  </code></pre>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
  
      &lt;div id="boards-list"&gt;
      Boards List&lt;br&gt;
      Switch to &lt;a href=""&gt;Schools List&lt;/a&gt;
      Here's some content
      &lt;/div&gt;
  
      &lt;div id="schools-list"&gt;
      Schools List&lt;br&gt;
      Switch to &lt;a href="#container"&gt;Boards List&lt;/a&gt;
      Here's some other content
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;Why is this beneath everything?&lt;/div&gt;
  </code></pre>