<div class="out">
  <span class="static">static</span>
  <span class="relative">relative</span>
  <span class="absolute">absolute</span>
  <span class="fixed">fixed</span>
</div>   
.out{
  position: relative;
}

span{
  border: 1px solid white;
  text-align: center;
}

.relative{
  position: relative;
/* width: 50px; 
  height: 50px; */
  top: 20px;
  z-index: 12;
  background-color: var(--grey1);
}

.absolute{
  position: absolute;
  width: 80px;
  height: 80px;;
  top: 30px;
  left: 40px;
  z-index: 11;
  background-color: #FF0000;
  
}

.fixed{
  width: 50px;
  height: 50px;
  position: fixed;
  z-index: 10;
  left: 90px;
  background-color: var(--grey2);
}

body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

:root{
  --grey1: rgb(60,60,60);
  --grey2: rgb(90,90,90);
  --grey3: rgb(120,120,120);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.