title: Place one image on top of the other
body: <p>I need to place my second picture (img id="stack") on top of my first picture. I've tried using relative and absolute positioning but it just seems to be below each other. </p>
  
  <p>This is the <a href="http://jsfiddle.net/BGND7/1/" rel="nofollow">JS Fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="imgpos"&gt;
    &lt;img id="bkgr" src="http://upload.wikimedia.org/wikipedia/commons   /f/fd/Moon_in_Sunrise_Sky_2.jpg" width="400" height="400"&gt; 
    &lt;img id= "stack" src="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG" width="200" height="150"&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#imgpos
  {
    position: relative;
    left: 30px;
   }
  
   #imgpos bkgr
   {
     position: absolute;
     z-index: 1;
   }
  
   #imgpos stack
   {
      position: absolute;
      z-index: 2;
    }
  </code></pre>