title: CSS: overlaying images in animation
body: <p>I want two images to come down from above the top of the page and have the second one partially cover the first one.<br>When the position is set to absolute the covering works, but they do not come from above the page, they appear near the bottom. When the position is set to relative they do come from above the top, but the covering doesn't work.<br>Is there a way to do what I'm looking for?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.float {
    position: relative;
    opacity: 0;}
  @keyframes floatBubble {
    0% {bottom:100px; opacity: 1;}
    100% {bottom: 0px; opacity: 1;}}
    
  #f1 {animation: floatBubble 0.5s linear 0.5s forwards;left:0px}
  #f2 {animation: floatBubble 0.5s linear 0.8s forwards;left:48px}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f1"&gt;
  
  &lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" class="float" id="f2"&gt;</code></pre>
  </div>
  </div>
  </p>