'use client'; /* * Vireo Next.js — Utilities · Positioning. * 1:1 re-expression of src/html/utilities/position.html: absolute overlays * (corner badge + avatar status dot), an inset+transform dead-center media overlay, * sticky scroll-box section headers, a fixed toast & FAB demo and a z-index ladder. * The fixed toast is teleported to via createPortal (Alpine x-teleport). */ import { useState } from 'react'; import { createPortal } from 'react-dom'; import { PageHead } from '../../components/shell/PageHead'; const STICKY_GROUPS: [string, string[]][] = [ ['A', ['Aisha Bello', 'Ava Sutton', 'Aperture Goods']], ['B', ['Brightway Retail', 'Brass Task Light']], ['C', ['Camila Rossi', 'Cedar & Co.', 'Cork Desk Mat']], ['D', ['Daniel Cho', 'Devon Okafor']], ['E', ['Erik Lindqvist']], ]; const ZLADDER: [string, number, string][] = [ ['base', 0, '--ax-viz-cyan'], ['card', 1, '--ax-viz-violet'], ['popover', 2, '--ax-viz-pink'], ['toast', 3, '--ax-accent'], ]; export function Position() { const [fixedOpen, setFixedOpen] = useState(false); const showToast = () => { setFixedOpen(true); setTimeout(() => setFixedOpen(false), 3200); }; return ( <> Helpers Breakpoints } />
{/* Absolute */}
position: absolute

Absolute overlays

A relatively-positioned parent anchors badges, ribbons & status dots.

−40% top / right Aperture Desk Lamp
$129.00
AS