Stacking order of three classes used in div elements in the body : left : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » left »

Stacking order of three classes used in div elements in the body


 

<html>
  <head> 
    <style type="text/css">

.layer1 {
  font-size: 190pt;
  font-weight: 900;
  color: white;
  z-index: 1;
  position: absolute;
  left: -100px;
  top: -120px;
  background: red;
}

.layer2 {
  font-size: 12pt;
  font-weight: 500;
  color: blue;
  z-index: 3;
  position: absolute;
  left: 40px;
  top: 80px;
  background: gold;
}

.layer3 {
  font-size: 100pt;
  font-weight: 300;
  color: yellow;
  z-index: 2;
  position: absolute;
  left: -20px;
  top: 0px;
  background: pink;
}
</style>
  </head>
  <body>
    <div class="layer1"></div>
    <div class="layer3">Position</div>
    <div class="layer2">
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </body>
</html>