Position: Relative

Establishes positioning context.

html

<div class="pr-wrap" role="img" aria-label="A relatively positioned box shifted from its original spot, which stays reserved in the layout as a dashed outline">
  <div class="pr-row">
    <div class="pr-ghost">1</div>
    <div class="pr-ghost">
      <span class="pr-label">original spot</span>
      <div class="pr-box" style="top:14px;left:20px;background:#A8E6C1;">2</div>
    </div>
    <div class="pr-ghost">3</div>
  </div>
  <p class="pr-caption">position: relative; top: 14px; left: 20px &mdash; box 2 moves, its space in the flow does not</p>
</div>
<style>
.pr-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.pr-row { display: flex; gap: 10px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 14px; box-sizing: border-box; }
.pr-ghost { position: relative; width: 60px; height: 60px; border: 1.5px dashed #24143055; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #24143066; }
.pr-label { position: absolute; top: -18px; left: 0; font-size: 9px; color: #24143088; white-space: nowrap; }
.pr-box { position: relative; width: 60px; height: 60px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #241430; box-shadow: 0 4px 10px rgba(36,20,48,.25); }
.pr-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="A relatively positioned box shifted from its original spot, which stays reserved in the layout as a dashed outline">
  <div class="flex gap-2.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3.5 box-border">
    <div class="relative w-[60px] h-[60px] border-[1.5px] border-dashed border-[#24143055] rounded-md flex items-center justify-center font-bold text-[#24143066]">1</div>
    <div class="relative w-[60px] h-[60px] border-[1.5px] border-dashed border-[#24143055] rounded-md flex items-center justify-center font-bold text-[#24143066]">
      <span class="absolute -top-[18px] left-0 text-[9px] text-[#24143088] whitespace-nowrap">original spot</span>
      <div class="relative w-[60px] h-[60px] rounded-md flex items-center justify-center font-bold text-[#241430] shadow-lg" style="top:14px;left:20px;background:#A8E6C1;">2</div>
    </div>
    <div class="relative w-[60px] h-[60px] border-[1.5px] border-dashed border-[#24143055] rounded-md flex items-center justify-center font-bold text-[#24143066]">3</div>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">position: relative; top: 14px; left: 20px &mdash; box 2 moves, its space in the flow does not</p>
</div>

react

export function PositionRelative({
  top = 14,
  left = 20,
  background = "#A8E6C1",
}) {
  const ghost = { position: "relative", width: 60, height: 60, border: "1.5px dashed #24143055", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: "#24143066" };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="A relatively positioned box shifted from its original spot, which stays reserved in the layout as a dashed outline">
      <div style={{ display: "flex", gap: 10, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 14, boxSizing: "border-box" }}>
        <div style={ghost}>1</div>
        <div style={ghost}>
          <span style={{ position: "absolute", top: -18, left: 0, fontSize: 9, color: "#24143088", whiteSpace: "nowrap" }}>original spot</span>
          <div style={{ position: "relative", width: 60, height: 60, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center",
            fontWeight: 700, color: "#241430", boxShadow: "0 4px 10px rgba(36,20,48,.25)", background, top, left }}>2</div>
        </div>
        <div style={ghost}>3</div>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>
        position: relative; top: {top}px; left: {left}px &mdash; box 2 moves, its space in the flow does not
      </p>
    </div>
  );
}