Edit Position: Relative

Name

Also known as (comma separated)

Brief definition Establishes positioning context.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "top", "type": "number", "label": "top offset", "default": 14, "min": -30, "max": 30, "step": 2 }, { "id": "left", "type": "number", "label": "left offset", "default": 20, "min": -30, "max": 30, "step": 2 }, { "id": "background", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "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\">\n <div class=\"pr-row\">\n <div class=\"pr-ghost\">1</div>\n <div class=\"pr-ghost\">\n <span class=\"pr-label\">original spot</span>\n <div class=\"pr-box\" style=\"top:{{top}}px;left:{{left}}px;background:{{background}};\">2</div>\n </div>\n <div class=\"pr-ghost\">3</div>\n </div>\n <p class=\"pr-caption\">position: relative; top: {{top}}px; left: {{left}}px &mdash; box 2 moves, its space in the flow does not</p>\n</div>\n<style>\n.pr-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.pr-row { display: flex; gap: 10px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 14px; box-sizing: border-box; }\n.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; }\n.pr-label { position: absolute; top: -18px; left: 0; font-size: 9px; color: #24143088; white-space: nowrap; }\n.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); }\n.pr-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</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\">\n <div class=\"flex gap-2.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3.5 box-border\">\n <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>\n <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]\">\n <span class=\"absolute -top-[18px] left-0 text-[9px] text-[#24143088] whitespace-nowrap\">original spot</span>\n <div class=\"relative w-[60px] h-[60px] rounded-md flex items-center justify-center font-bold text-[#241430] shadow-lg\" style=\"top:{{top}}px;left:{{left}}px;background:{{background}};\">2</div>\n </div>\n <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>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">position: relative; top: {{top}}px; left: {{left}}px &mdash; box 2 moves, its space in the flow does not</p>\n</div>", "react": "export function PositionRelative({\n top = {{top}},\n left = {{left}},\n background = \"{{background}}\",\n}) {\n 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\" };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"A relatively positioned box shifted from its original spot, which stays reserved in the layout as a dashed outline\">\n <div style={{ display: \"flex\", gap: 10, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 14, boxSizing: \"border-box\" }}>\n <div style={ghost}>1</div>\n <div style={ghost}>\n <span style={{ position: \"absolute\", top: -18, left: 0, fontSize: 9, color: \"#24143088\", whiteSpace: \"nowrap\" }}>original spot</span>\n <div style={{ position: \"relative\", width: 60, height: 60, borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n fontWeight: 700, color: \"#241430\", boxShadow: \"0 4px 10px rgba(36,20,48,.25)\", background, top, left }}>2</div>\n </div>\n <div style={ghost}>3</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n position: relative; top: {top}px; left: {left}px &mdash; box 2 moves, its space in the flow does not\n </p>\n </div>\n );\n}" }