CSS Position z-index - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html lang="en">
<head>
<style>
      .container {
        min-height: 300px;
        position: relative;
      }
      /* example one  */
      .element-1,
      .element-2,
      .element-3 {
        width: 100px;
        min-height: 42px;
        border-radius: 5px;
        position: absolute;
        color: #fff;
        text-align: center;
        overflow: hidden;
        padding-top: 60px;
      }
      .element-1 {
        border: solid #7f007f;
        background: #fff;
        z-index: 1;
        top: 50px;
      }
      .element-2 {
        border: solid #fff;
        left: 55px;
        z-index: -1;
        top: 100px;
        background: #800080;
      }
      .element-3 {
        border: solid #000000;
        left: 110px;
        z-index: -2;
        top: 150px;
        background: #d4086e;
      }
      /* example two */
      .element-4,
      .element-5,
      .element-6 {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        position: absolute;
        color: #fff;
        text-align: center;
        overflow: hidden;
        z-index: auto;
      }
      .element-4 {
        border: solid #008000;
        background: #000;
        top: 100px;
      }
      .element-5 {
        border: solid #38c256;
        left: 55px;
        top: 150px;
        background: #ca0d2d;
      }
      .element-6 {
        border: solid #2132c4;
        left: 110px;
        top: 200px;
        background: #bdc01f;
      }
    </style>
</head>
<body>

<div class="container">
<h2>Setting Element z-index to 1,-1 and -2.</h2>
<div class="element-1" style="color:#000">
        z-index:1;
      </div>
<div class="element-2">
        z-index:-1;
      </div>
<div class="element-3">
        z-index:-2;
      </div>
</div>

<div class="container">
<h2>Setting All Element z-index to auto.</h2>
<p>When <code>z-index:auto;</code> is used, elements receive their <code>z-index</code> position in the order they appear in  the document.</p>
<div class="element-4">
        z-index:auto;
      </div>
<div class="element-5">
        z-index:auto;
      </div>
<div class="element-6">
        z-index:auto;
      </div>
</div>
</body>
</html>