<html>
  <head>
    <style type="text/css">
      div.back {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 200px;
        height: 200px;
        background-color: gray;
      }
      div.front {
        position: absolute;
        width: 80px;
        height: 80px;
        background-color: lightgray;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="back">
      <div class="front" id="div-left-top" style="left: 10px; top: 10px">
        left-top
      </div>
      <div class="front" id="div-right-top" style="left: 110px; top: 10px">
        right-top
      </div>
      <div class="front" id="div-left-bottom" style="left: 10px; top: 110px">
        left-bottom
      </div>
      <div class="front" id="div-right-bottom" style="left: 110px; top: 110px">
        right-bottom
      </div>
    <div>
  </body>
</html>