Edit Position: Absolute

Name

Also known as (comma separated)

Brief definition Positions relative to containing block.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "top", "type": "number", "label": "top offset", "default": 20, "min": 0, "max": 90, "step": 5 }, { "id": "left", "type": "number", "label": "left offset", "default": 20, "min": 0, "max": 90, "step": 5 }, { "id": "containerPositioned", "type": "toggle", "label": "Inner container is positioned", "default": true }, { "id": "background", "type": "color", "label": "Chip colour", "default": "#E8A020", "presets": [ "#E8A020", "#F5C2E0", "#A8E6C1" ] } ]

Templates (JSON object keyed by format) { "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;\">\n <div class=\"pa-outer\">\n <span class=\"pa-tag\">outer frame (position: relative)</span>\n <div class=\"pa-inner\" style=\"position:{{#if containerPositioned}}relative{{/if}}{{#unless containerPositioned}}static{{/unless}};\">\n <span class=\"pa-tag pa-tag--inner\">inner box (position: {{#if containerPositioned}}relative{{/if}}{{#unless containerPositioned}}static{{/unless}})</span>\n <div class=\"pa-chip\" style=\"top:{{top}}px;left:{{left}}px;background:{{background}};\">chip</div>\n </div>\n </div>\n <p class=\"pa-caption\">position: absolute; top: {{top}}px; left: {{left}}px &mdash; positions against the nearest positioned ancestor</p>\n</div>\n<style>\n.pa-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.pa-outer { position: relative; height: 170px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.pa-inner { height: 100px; margin-top: 18px; background: #BFD9F2; border-radius: 6px; box-sizing: border-box; }\n.pa-tag { position: absolute; top: 4px; left: 8px; font-size: 10px; color: #24143099; }\n.pa-tag--inner { position: static; display: block; padding: 6px 8px 0; font-size: 10px; color: #241430aa; }\n.pa-chip { position: absolute; padding: 8px 12px; border-radius: 6px; font-weight: 700; box-shadow: 0 4px 10px rgba(36,20,48,.25); }\n.pa-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</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\">\n <div class=\"relative h-[170px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\">\n <span class=\"absolute top-1 left-2 text-[10px] text-[#24143099]\">outer frame (position: relative)</span>\n <div class=\"h-[100px] mt-[18px] bg-[#BFD9F2] rounded-md box-border\" style=\"position:{{#if containerPositioned}}relative{{/if}}{{#unless containerPositioned}}static{{/unless}};\">\n <span class=\"block pt-1.5 px-2 text-[10px] text-[#241430aa]\">inner box (position: {{#if containerPositioned}}relative{{/if}}{{#unless containerPositioned}}static{{/unless}})</span>\n <div class=\"absolute p-2 px-3 rounded-md font-bold shadow-lg\" style=\"top:{{top}}px;left:{{left}}px;background:{{background}};\">chip</div>\n </div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">position: absolute; top: {{top}}px; left: {{left}}px &mdash; positions against the nearest positioned ancestor</p>\n</div>", "react": "export function PositionAbsolute({\n top = {{top}},\n left = {{left}},\n containerPositioned = {{containerPositioned}},\n background = \"{{background}}\",\n}) {\n return (\n <div style={{ position: \"relative\", font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n 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\">\n <div style={{ position: \"relative\", height: 170, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\" }}>\n <span style={{ position: \"absolute\", top: 4, left: 8, fontSize: 10, color: \"#24143099\" }}>outer frame (position: relative)</span>\n <div style={{ position: containerPositioned ? \"relative\" : \"static\", height: 100, marginTop: 18, background: \"#BFD9F2\", borderRadius: 6, boxSizing: \"border-box\" }}>\n <span style={{ display: \"block\", paddingTop: 6, padding: \"6px 8px 0\", fontSize: 10, color: \"#241430aa\" }}>\n inner box (position: {containerPositioned ? \"relative\" : \"static\"})\n </span>\n <div style={{ position: \"absolute\", top, left, padding: \"8px 12px\", borderRadius: 6, fontWeight: 700, boxShadow: \"0 4px 10px rgba(36,20,48,.25)\", background }}>\n chip\n </div>\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n position: absolute; top: {top}px; left: {left}px &mdash; positions against the nearest positioned ancestor\n </p>\n </div>\n );\n}" }