Position: Absolute

Positions relative to containing block.

html

<div class="pa-wrap" role="img" aria-label="An absolutely positioned chip inside a box; when the box is not itself positioned, the chip escapes it and positions against the outer frame instead" style="position:relative;">
  <div class="pa-outer">
    <span class="pa-tag">outer frame (position: relative)</span>
    <div class="pa-inner" style="position:relative;">
      <span class="pa-tag pa-tag--inner">inner box (position: relative)</span>
      <div class="pa-chip" style="top:20px;left:20px;background:#E8A020;">chip</div>
    </div>
  </div>
  <p class="pa-caption">position: absolute; top: 20px; left: 20px &mdash; positions against the nearest positioned ancestor</p>
</div>
<style>
.pa-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.pa-outer { position: relative; height: 170px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.pa-inner { height: 100px; margin-top: 18px; background: #BFD9F2; border-radius: 6px; box-sizing: border-box; }
.pa-tag { position: absolute; top: 4px; left: 8px; font-size: 10px; color: #24143099; }
.pa-tag--inner { position: static; display: block; padding: 6px 8px 0; font-size: 10px; color: #241430aa; }
.pa-chip { position: absolute; padding: 8px 12px; border-radius: 6px; font-weight: 700; box-shadow: 0 4px 10px rgba(36,20,48,.25); }
.pa-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="relative font-sans text-[#241430] w-[320px]" role="img" aria-label="An absolutely positioned chip inside a box; when the box is not itself positioned, the chip escapes it and positions against the outer frame instead">
  <div class="relative h-[170px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border">
    <span class="absolute top-1 left-2 text-[10px] text-[#24143099]">outer frame (position: relative)</span>
    <div class="h-[100px] mt-[18px] bg-[#BFD9F2] rounded-md box-border" style="position:relative;">
      <span class="block pt-1.5 px-2 text-[10px] text-[#241430aa]">inner box (position: relative)</span>
      <div class="absolute p-2 px-3 rounded-md font-bold shadow-lg" style="top:20px;left:20px;background:#E8A020;">chip</div>
    </div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">position: absolute; top: 20px; left: 20px &mdash; positions against the nearest positioned ancestor</p>
</div>

react

export function PositionAbsolute({
  top = 20,
  left = 20,
  containerPositioned = true,
  background = "#E8A020",
}) {
  return (
    <div style={{ position: "relative", font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="An absolutely positioned chip inside a box; when the box is not itself positioned, the chip escapes it and positions against the outer frame instead">
      <div style={{ position: "relative", height: 170, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box" }}>
        <span style={{ position: "absolute", top: 4, left: 8, fontSize: 10, color: "#24143099" }}>outer frame (position: relative)</span>
        <div style={{ position: containerPositioned ? "relative" : "static", height: 100, marginTop: 18, background: "#BFD9F2", borderRadius: 6, boxSizing: "border-box" }}>
          <span style={{ display: "block", paddingTop: 6, padding: "6px 8px 0", fontSize: 10, color: "#241430aa" }}>
            inner box (position: {containerPositioned ? "relative" : "static"})
          </span>
          <div style={{ position: "absolute", top, left, padding: "8px 12px", borderRadius: 6, fontWeight: 700, boxShadow: "0 4px 10px rgba(36,20,48,.25)", background }}>
            chip
          </div>
        </div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        position: absolute; top: {top}px; left: {left}px &mdash; positions against the nearest positioned ancestor
      </p>
    </div>
  );
}