Edit Position: Fixed

Name

Also known as (comma separated)

Brief definition Positions relative to viewport.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "top", "type": "number", "label": "top offset", "default": 10, "min": 0, "max": 90, "step": 5 }, { "id": "right", "type": "number", "label": "right offset", "default": 10, "min": 0, "max": 90, "step": 5 }, { "id": "label", "type": "text", "label": "Badge text", "default": "★ pinned" }, { "id": "background", "type": "color", "label": "Badge colour", "default": "#E8A020", "presets": [ "#E8A020", "#F5C2E0", "#A8E6C1" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pf-wrap\" role=\"img\" aria-label=\"A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls\">\n <div class=\"pf-viewport\">\n <div class=\"pf-badge\" style=\"top:{{top}}px;right:{{right}}px;background:{{background}};\">{{label}}</div>\n <div class=\"pf-content\">\n <p>Scroll this area.</p>\n <p>The badge does not move with it.</p>\n <p>Line four of filler content.</p>\n <p>Line five of filler content.</p>\n <p>Line six of filler content.</p>\n <p>Line seven of filler content.</p>\n </div>\n </div>\n <p class=\"pf-caption\">position: fixed; top: {{top}}px; right: {{right}}px &mdash; pinned to the viewport, ignores scrolling</p>\n</div>\n<style>\n.pf-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.pf-viewport { position: relative; transform: translateZ(0); height: 150px; overflow: auto; background: #FAF7F2; border: 1.5px solid #24143055; border-radius: 8px; }\n.pf-badge { position: fixed; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 10px rgba(36,20,48,.3); }\n.pf-content { padding: 12px; }\n.pf-content p { margin: 0 0 34px; font-size: 12px; }\n.pf-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls\">\n <div class=\"relative [transform:translateZ(0)] h-[150px] overflow-auto bg-[#FAF7F2] border-[1.5px] border-[#24143055] rounded-lg\">\n <div class=\"fixed px-2.5 py-1.5 rounded-full text-[11px] font-bold shadow-lg\" style=\"top:{{top}}px;right:{{right}}px;background:{{background}};\">{{label}}</div>\n <div class=\"p-3\">\n <p class=\"mb-[34px] text-xs\">Scroll this area.</p>\n <p class=\"mb-[34px] text-xs\">The badge does not move with it.</p>\n <p class=\"mb-[34px] text-xs\">Line four of filler content.</p>\n <p class=\"mb-[34px] text-xs\">Line five of filler content.</p>\n <p class=\"mb-[34px] text-xs\">Line six of filler content.</p>\n <p class=\"mb-[34px] text-xs\">Line seven of filler content.</p>\n </div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">position: fixed; top: {{top}}px; right: {{right}}px &mdash; pinned to the viewport, ignores scrolling</p>\n</div>", "react": "export function PositionFixed({\n top = {{top}},\n right = {{right}},\n label = \"{{label}}\",\n background = \"{{background}}\",\n}) {\n const lineStyle = { margin: \"0 0 34px\", fontSize: 12 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A mock browser viewport with scrollable content; the badge is fixed and stays pinned in the same corner while the content underneath scrolls\">\n <div style={{ position: \"relative\", transform: \"translateZ(0)\", height: 150, overflow: \"auto\", background: \"#FAF7F2\", border: \"1.5px solid #24143055\", borderRadius: 8 }}>\n <div style={{ position: \"fixed\", top, right, background, padding: \"6px 10px\", borderRadius: 999, fontSize: 11, fontWeight: 700, boxShadow: \"0 4px 10px rgba(36,20,48,.3)\" }}>\n {label}\n </div>\n <div style={{ padding: 12 }}>\n <p style={lineStyle}>Scroll this area.</p>\n <p style={lineStyle}>The badge does not move with it.</p>\n <p style={lineStyle}>Line four of filler content.</p>\n <p style={lineStyle}>Line five of filler content.</p>\n <p style={lineStyle}>Line six of filler content.</p>\n <p style={lineStyle}>Line seven of filler content.</p>\n </div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n position: fixed; top: {top}px; right: {right}px &mdash; pinned to the viewport, ignores scrolling\n </p>\n </div>\n );\n}" }