1. To do this exercise, you're going to need three photos of about the same size.
   
• Download those and crop them to the right size if you need to.
2. Then you need to create an HTML file.
3. Since we're only creating one page, rather than building a separate stylesheet, we're going to put the CSS in the head. How do you do that? 
• In your head you're going to put the tags <style> and </style>. 
• Between these tags we're going to create our CSS elements.
4. Between the style tags you need to create three classes for image. The first should be something like this: img {position:fixed; left:0px; top:0px; z-index:-1;}
• Once you put the img class into your HTML this should put your image in the top left corner of the page.
• Notice that it's z -1 and fixed meaning it will appear below any text that scrolls along the page.
5. Create a second img class in your head between your style tags.
• Adjust the left and top positions to 100px, and change the z-index to +1.
• Put the image into your HTML using the class you just created.
  
• Hopefully that made the second picture overlap the first picture just a bit.
  
• If the first picture is obscured, change the position of the second picture by adjusting the top and left numbers a bit.
  
• Try to overlap just the bottom right corner of your first picture with the top right corner of your second picture.
6. Create a third img class that overlaps the second picture just a bit, and has z-index of +3.
• Put the new image in you HTML and make the necessary adjustments.
  
7. In the body of your HTML page, put in your paragraph.
   
• Make sure that you include content for the paragraphs that will stretch all the way across the screen. The content should be long enough that it can be seen that it goes over a paragraph but under another.
  
• You could get this from the Lorem or Bacon Ipsum sites.
8. If you have done this correctly, you should end up with three overlapping pictures, and text that will flow over some pictures, but under others.

Evaluation