How can I make a scene of overlapping images with z-index and keep the design responsive?

I'm an illustrator who is doing a piece for the web and fairly new to HTML, CSS, and Javascript. For my basic scene, I need an image of a bird to overlap an image of the sky, because I am going to animate the bird simply (flapping wings, etc.) in the final version.

I've made a div that holds the image of the mountain and the image of the bird. Using CSS, I've successfully overlapped them with z-index, but I can't seem to get relative percentage values to work in terms of their relationship to one another (i.e. I need the bird at a certain place in the sky). I also looked up a method for making the whole design responsive with a tag to control the viewport, but even after including it nothing scales. I'd appreciate any help--I'm trying to wrap my mind around positioning but nothing I try is working.

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <div id='scene'>
        <img class='sky' src='skybox.png'>
        <img class='bird' src='bird.png'>
    </div>

  </body>

</html>

CSS

#scene {
    position: relative;
    z-index: -1;
}

.sky {
    position: relative;
    z-index: 1;
}

.bird{
    position: relative;
    z-index: 2;
    /* this is where I'd like to add some percentage that 
    would be responsive and also put the bird at a certain 
    place in the sky. Pixel values work to position it but 
    the top has to be negative even to get it in the sky at 
    all, and percentages do nothing */

}

Solution

You want to put the parent container into position: relative and then the children as position: absolute That way, you can control how they act within the parent div.

It's a lot easier if whatever pictures you're using are the same dimensions. If they are, you just set the margins like so:

.bird, .sky, .sun {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Here's a snippet for you to study. :) Let me know if you have any questions!

.scene {
  position: relative;
  width: 50vw;
  height: 50vh;
  z-index: 0;
  overflow: hidden;
}

.bird, .sky, .sun {
  position: absolute;
}

.bird {
  border: 1px solid red;
  height: 10%;
  width: 5%;
  bottom: 10%;
  left: 20%;
  background-color: red;
  z-index: 1;
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

.sun {
  top: -10%;
  right: -10%;
  height: 30%;
  width: 20%;
  border-radius: 100%;
  background-color: yellow;
  z-index: 2;
  overflow: hidden;
}

<div class="scene">
  <div class="bird"></div>
  <div class="sky"></div>
  <div class="sun"></div>
</div>