The Web Design Survival Guide | Absolute Positioning

by todaly1

HTML

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 <link rel="stylesheet" href="css-box-model-6.css">
 </head>
 <body>
   <div class="box-6-parent-element">Box 6
     <div class="box-1-center">Box 1</div>
     <div class="box-2-top-left">Box 2</div>
     <div class="box-3-top-right">Box 3</div>
     <div class="box-4-bottom-left">Box 4</div>
     <div class="box-5-bottom-right">Box 5</div>
   </div>
 </body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

  .box-1-center {
   width: 160px;
   height: 160px;
   padding: 10px;
   border: 1px solid #000000;
   text-align: center;
   background-color: #00ffff;
   color: #000000;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: absolute;
   top: 100px;
   left: 100px;
 }
  .box-2-top-left {
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: absolute;
   left: 0px;
   Top: 0px;
 }
   
  .box-3-top-right {
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: absolute;
   right: 0px;
   Top: 0px;
}

 .box-4-bottom-left {
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: absolute;
   left: 0px;
   bottom: 0px;
 }
   
  .box-5-bottom-right {
   width: 100px;
   height: 100px;
   padding: 10px;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #000000;
   color: #ffffff;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: absolute;
   right: 0px;
   bottom: 0px;
 }
   
  .box-6-parent-element {
   width: 360px;
   height: 360px;
   padding: 10px;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid #00ffff;
   text-align: center;
   background-color: #cccccc;
   color: #000000;
   font-size: 12px;
   font-family: Helvetica, Arial, "sans-serif";
   position: relative;
 } }