mfa dt bootcamp web class css positioning example 5: absolute with Children

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <title>Example F</title>
  <style>
        h1, h3, div {
          z-index: 10;
          text-align: center;
        }
    .box { 
      position: absolute; 
      width: 200px; 
      height: 200px; 
      z-index: -9;
    }
    #box_1 { 
      background: #ee3e64; 
      top: 0; 
      left: 0; 
    }
    #box_2 { 
      background: #44accf;
      top: 0;
      right: 0;
    }
    #box_3 { 
      background: #b7d84b;
      bottom: 0;
      left: 0; 
    }
    #box_4 { 
      background: #ebde52; 
      bottom: 0; 
      right: 0; 
    }
    .orange { 
      background: #f95b34; 
      position: absolute; 
      top: 39%; 
      left: 41%; 
      width: 40px; 
      height: 40px; 
    }
  </style>
</head>
<body>
  <h1>Four boxes positioned absolutely, <br>each with a box inside them</h1>
  <h3>The inner boxes have top: 39% and left: 41% </h3>
  <div id="box_1" class="box">
    <div class="orange"></div>
  </div>
  <div id="box_2" class="box">
    <div class="orange"></div>
  </div>
  <div id="box_3" class="box">
    <div class="orange"></div>
  </div>
  <div id="box_4" class="box">
    <div class="orange"></div>
  </div>
</body>
</html>