/* PART A: RELATIVE POSITIONING
       Write the CSS to position .box1 using relative positioning.
       Move it 50px down and 100px to the right from its normal position. 
       Notice that, although the box moves, the page still keeps its original position in the flow of the page.  Box 2 does not move to fill that space.
       */

  .box1 {
      position: relative;
      top: 50px;
      left: 100px;
  }

  /* PART B: ABSOLUTE POSITIONING
       Write the CSS to position .box2 using absolute positioning.
       Place it 50px from the top and 50px from the right of its nearest positioned ancestor.
       
       Explain what just happened?  Where did the grey container go?
       What happened to the space that was occupied by the box?
     */
  .container {
      /* Set a positioning context for absolute children by making the parent container relative 
      
      
      */
      position: relative;
  }

  .box2 {
      position: absolute;
      top: 50px;
      right: 50px
  }

  /* PART C: FIXED POSITIONING
       Write the CSS to fix .box3 to the bottom-left corner of the viewport.
       It should always stay 10px from the bottom and 10px from the left. */
  .box3 {
      position: fixed;
      bottom: 10px;
      left: 10px;

  }

  /* PART D: STICKY POSITIONING
       Write the CSS for .box4 to "stick" to the top of the viewport when scrolling.
       It should start normally and become fixed to the top once it reaches it. */
  .box4 {
      position: sticky;
      top: 0;
  }

  /* PART E: Z-INDEX
       Write the CSS so that .box5 appears above all other boxes, even if they overlap.
       Hint: Use position and a high z-index value.  Prove that Box five sits on top of the other boxes scrolling unit it is overtop of box 4*/
  .box5 {
      position: absolute;
      z-index: 100;
  }