CSS z-index Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.stack {
  position: relative;
  width: 480px;
  height: 240px;
  margin: 40px auto;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 180px;
  height: 120px;
  padding: 12px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.box1 {
  top: 16px;
  left: 16px;
  background: rgba(234, 88, 12, 0.95);
  z-index: 10;
}

.box2 {
  top: 40px;
  left: 120px;
  background: rgba(37, 99, 235, 0.95);
  z-index: 5;
}

.box3 {
  top: 80px;
  left: 80px;
  background: rgba(16, 185, 129, 0.95);
  /* no z-index: follows document order within the same stacking context */
  transform: translateZ(0); /* creates a new stacking context in some browsers */
}

.box4 {
  top: 120px;
  left: 200px;
  background: rgba(168, 85, 247, 0.95);
  z-index: 999;
}
</style></head><body><div class='stack'>
  <div class='box box1'>Box 1</div>
  <div class='box box2'>Box 2</div>
  <div class='box box3'>Box 3 (no z-index)</div>
  <div class='box box4'>Box 4 (highest z-index)</div>
</div></body></html>