stacking context ex1

by Boyanliuu

HTML

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>stacking context</title>

</head>

<body>
  <div>  
    <p class="a">a</p>  
    <p class="b">b</p>  
  </div> 

  <div>  
    <p class="c">c</p>  
  </div>  


</body>

</html>

CSS

* {
     margin: 0;
     padding: 0;
}
 div {
     position: relative;
     width: 100px;
     height: 100px;
}
 p {
     position: absolute;
     font-size: 20px;
     width: 100px;
     height: 100px;
}
 .a {
     background-color: blue;
     z-index: 1;
}
 .b {
     background-color: green;
     z-index: 2;
     top: 20px;
     left: 20px;
}
 .c {
     background-color: red;
     z-index: 3;
     top: -20px;
     left: 40px;
}