positions.css

.box {
  height: 100px;
  width: 100px; 
}

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

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

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

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

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

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