title: CSS position: absolute with position: relative "top" not working
body: <p>I'm working on a site that uses position: relative div containing position: absolute divs.  I understand the concept I believe, and everything works great except I cannot seem to get the <code>top</code> attribute to do anything.  left works, but not top. My code is as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="imagemenu"&gt;
      &lt;div class="west"&gt;
          &lt;img src="/makingmusicstore/wp-content/themes/makingmusic/img/west.png" alt="west"&gt;
      &lt;/div&gt;
      &lt;div class="southwest"&gt;
          &lt;img src="/makingmusicstore/wp-content/themes/makingmusic/img/southwest.png alt=" southwest "&gt;
      &lt;/div&gt;
      &lt;div class="south "&gt;
          &lt;img src="/makingmusicstore/wp-content/themes/makingmusic/img/south.png " alt="south "&gt;
      &lt;/div&gt;
      &lt;div class="logo "&gt;
          &lt;img src="/makingmusicstore/wp-content/themes/makingmusic/img/logo.png " alt="Making Music Store "&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#imagemenu {
      position: relative;
  }
  .logo img {
      position: absolute;
      width: 20%;
      top: 50%;
      left: 40%;
  }
  .west img {
      position: absolute;
      width: 30%;
      left: 15%;
  }
  .southwest img {
      position: absolute;
      width: 30%;
      left: 15%;
  }
  .south img {
      position: absolute;
      left: 35%;
  }
  </code></pre>
  
  <p>The site is adams-web.net/makingmusicstore and is currently a mess until I can get the top attribute to work.  It seems to me that the logo should be much further down the page, but it is not working as I believe it should.  I'm not sure what I'm missing.  It does work when I change the position to static, but it doesn't keep the position correctly.</p>