On this card you will use CSS to position HTML elements exactly and make a photo collage.

Add a div to your page and put as many images in it as you like. Give the div and the img elements id values.

   <div id="photoBox">
     <img id="imgHorse" src="connemara-pony-512028_640.jpg" alt="Connemara pony" />
     <img id="imgTeaCat" src="ireland-2360846_640.jpg" alt="Even cats drink tea in Ireland!" />
   </div>

The photos will appear one after the other on the web page, in the order they appear in your code.

In your CSS file, add separate style rules for each of the elements using id selectors. For each of the elements inside the container, add the property position: absolute;. This lets you choose exact positions for them. You will want to define those positions relative to (i.e. within) the container, so you also need to add the property position: relative; to the container itself.

     #photoBox {
         width: 800px;
         height: 400px;
         position: relative;
     }
     #imgHorse {
         width: 120px;
         position: absolute;
     }
     #imgTeaCat {
         width: 250px;
         position: absolute;
     }

Then, you choose the exact positions you want for each picture. There are four properties you can use: left, right, top, and bottom. They represent how far each of the edges should be from the parent's edge. Use either top or bottom for the vertical position and use either left or right for the horizontal position.

This code places the cat picture 100 pixels from the top and 60 pixels in from the left.

     #imgTeaCat {
         width: 250px;
         top: 100px;
         left: 60px;
         position: absolute;
     }

• The position values can also be negative!

You can also decide how the pictures overlap, using the z-index property. The value can be any whole number. The picture with the highest number ends up on top of the pile!

     #imgHorse {
         width: 120px;
         top: 20px;
         left: 10px;
         position: absolute;
         z-index: 10;
     }
     #imgTeaCat {
         width: 250px;
         top: 100px;
         left: 60px;
         position: absolute;
         z-index: 7;
     }

You can position any html elements in this way, not just images. Try creating your own collage of photos, perhaps with some text over the top! Use exact positioning together with different z-index values to get the overlap effect the way you want it.