The Web Design Survival Guide | Z Index

by todaly1

HTML

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 <link rel="stylesheet" href="css-box-model-4.css">
 </head>
 <body>
   <div class="box-6-parent-element">Box 6
     <div class="box-1-center-z-index-1">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

.box-1-center-z-index-1 {
   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;
   z-index: 1;
  }

  .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;
  }