JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root_stacking_context">
  <div class="stack_context_negative_index">#1</div> 
  <div class="non_positioned non_inline">#2</div>
  <div class="non_positioned_float">#3</div>  
  <div class="non_positioned inline">#4</div>
  <div class="stack_context_positive_index">#5</div> 
</div>

CSS

.root_stacking_context {
  border: 1px solid;
  height: 300px;
  width: 300px;
}

.stack_context_negative_index {
  z-index: -1;
  background-color: red;
  height: 200px;
  width: 100px;
  position: absolute;
  text-align: right;
  top: 15px;
  left: 45px;
}

.non_positioned.non_inline {
  background-color: green;
  height: 100px;
  width: 100px;
  top: 30px;
  left: 30px;
  margin-bottom: -50px;
}

.non_positioned_float {
  float: left;
  background-color: cyan;
  height: 100px;
  width: 100px;
  margin-left: 15px;
}

.non_positioned.inline {
  background-color: orange;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin-left: -35px;
  margin-top: 15px;
}

.stack_context_positive_index {
  z-index: 1;
  background-color: yellow;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  left: 60px;
}