title: How to position elements under each other automatic
body: <p>The elements have to be under each other because in my script on some action a element will be moved from the bottom of the page to the top. When this happens on for example the 3rd image, the 3rd image will slide to the top but its old position is now a white gap.</p>
  
  <p>Sometimes I don't get it whether I have to use absolute, relative, fixed, static and so on. </p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div id='wrapper'&gt;
              &lt;img id='img1' src='./images/image1.jpg' alt='img1'&gt;
              &lt;br /&gt;
              &lt;img id='img2' src='./images/image2.jpg' alt='img2'&gt;
              &lt;br /&gt;
              &lt;img id='img3' src='./images/image3.jpg' alt='img3'&gt;
              &lt;br /&gt;
              &lt;img id='img4' src='./images/image4.jpg' alt='img4'&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>            body{
                  margin: 0;
                  padding: 0;
                  height: 100%;
                  width: 100%;
              }
              #wrapper{
                  padding: 0;
                  margin: 0;
                  width: 100%;
                  height: 100%;
              }
              #img1{
                  min-width: 100%;
                  min-height: 100%;
                  max-width: 100%;
                  max-height: 100%;
                  position: absolute;
                  top:0px;
              }
              #img2{
                  min-width: 100%;
                  min-height: 100%;
                  max-width: 100%;
                  max-height: 100%;
                  position: absolute;
                  top: 100%
              }
              #img3{
                  min-width: 100%;
                  min-height: 100%;
                  max-width: 100%;
                  max-height: 100%;
                  position: absolute;
                  top: 200%;
              }
              #img4{
                  min-width: 100%;
                  min-height: 100%;
                  max-width: 100%;
                  max-height: 100%;
                  position: absolute;
                  top: 300%;
              }
  </code></pre>
  
  <p>And my JavaScript for letting a element disappear on a certain action.</p>
  
  <pre><code>else {
  
          curr++;
  
          $('#img'+curr).animate({
              top: '0px'
          }, 1200);
  
  
  
          setTimeout(
               function() {
                  $('#img'+(curr-1)).css('display', 'none');
                }, 1200);
  
        }
  </code></pre>