Z-index

Controls stacking order.

html

<div class="zi-wrap" role="img" aria-label="Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top">
  <div class="zi-stack">
    <div class="zi-card zi-card--mint" style="z-index:1;">mint<br>z 1</div>
    <div class="zi-card zi-card--blush" style="z-index:2;">blush<br>z 2</div>
    <div class="zi-card zi-card--sky" style="z-index:0;">sky<br>z 0</div>
    <div class="zi-card zi-card--lav" style="z-index:3;">lavender<br>z 3</div>
  </div>
  <p class="zi-caption">z-index: mint 1 &middot; blush 2 &middot; sky 0 &middot; lavender 3 &mdash; highest number renders on top</p>
</div>
<style>
.zi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.zi-stack { position: relative; height: 160px; }
.zi-card { position: absolute; width: 120px; height: 90px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 12px; box-shadow: 0 6px 16px rgba(36,20,48,.25); border: 1.5px solid #241430; }
.zi-card--mint { background: #A8E6C1; top: 0; left: 0; }
.zi-card--blush { background: #F5C2E0; top: 20px; left: 50px; }
.zi-card--sky { background: #BFD9F2; top: 40px; left: 100px; }
.zi-card--lav { background: #D9C8F0; top: 60px; left: 150px; }
.zi-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top">
  <div class="relative h-[160px]">
    <div class="absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#A8E6C1] top-0 left-0" style="z-index:1;">mint<br>z 1</div>
    <div class="absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#F5C2E0] top-5 left-[50px]" style="z-index:2;">blush<br>z 2</div>
    <div class="absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#BFD9F2] top-10 left-[100px]" style="z-index:0;">sky<br>z 0</div>
    <div class="absolute w-[120px] h-[90px] rounded-[10px] flex items-center justify-center text-center font-bold text-xs shadow-lg border-[1.5px] border-[#241430] bg-[#D9C8F0] top-[60px] left-[150px]" style="z-index:3;">lavender<br>z 3</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">z-index: mint 1 &middot; blush 2 &middot; sky 0 &middot; lavender 3 &mdash; highest number renders on top</p>
</div>

react

export function ZIndexStack({
  z1 = 1,
  z2 = 2,
  z3 = 0,
  z4 = 3,
}) {
  const base = { position: "absolute", width: 120, height: 90, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center",
    textAlign: "center", fontWeight: 700, fontSize: 12, boxShadow: "0 6px 16px rgba(36,20,48,.25)", border: "1.5px solid #241430" };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="Four overlapping cards; each card's z-index number controls which one appears in front, higher numbers on top">
      <div style={{ position: "relative", height: 160 }}>
        <div style={{ ...base, background: "#A8E6C1", top: 0, left: 0, zIndex: z1 }}>mint<br />z {z1}</div>
        <div style={{ ...base, background: "#F5C2E0", top: 20, left: 50, zIndex: z2 }}>blush<br />z {z2}</div>
        <div style={{ ...base, background: "#BFD9F2", top: 40, left: 100, zIndex: z3 }}>sky<br />z {z3}</div>
        <div style={{ ...base, background: "#D9C8F0", top: 60, left: 150, zIndex: z4 }}>lavender<br />z {z4}</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        z-index: mint {z1} &middot; blush {z2} &middot; sky {z3} &middot; lavender {z4} &mdash; highest number renders on top
      </p>
    </div>
  );
}