Z-Ordering
You build a hero section with z-index: 10 on its navigation arrows. A content manager drags a product grid section below it. The arrows now paint over the grid. This is a z-index leak: values inside one section escape and break sibling sections. Laioutr prevents this with section isolation and a z-index token scale.
Section isolation
Every section gets its own CSS stacking context via isolation: isolate on the section root. Z-index values inside your section cannot leak out and affect neighboring sections.
Portaled content (reka-ui DropdownMenu, Sheet, Dialog, AlertDialog) is unaffected by section isolation because it renders outside your section's DOM tree via a portal to <body>.
The #__nuxt root
The Nuxt app root (#__nuxt) also receives isolation: isolate. This creates a stacking boundary between the app content and portaled elements at <body> level. Any portaled element with a positive z-index appears above the entire app.
How it fits together
Section z-index values (like the hero slider's z-index: 10) are trapped inside their section's stacking context. Portaled elements sit at <body> level with z-index values from the token scale, above the entire #__nuxt app.
Z-index tokens
Use the provided CSS custom properties instead of hardcoded z-index values:
| Token | Value | Use case |
|---|---|---|
--z-index-sticky | 100 | Sticky headers, fixed filter bars |
--z-index-modal | 1400 | Sheet, dialog, alert dialog (overlay and content) |
--z-index-popover | 1500 | Dropdown menus, select menus, popovers |
--z-index-tooltip | 1600 | Tooltips |
--z-index-toast | 1700 | Toast notifications |
.my-sticky-bar {
position: sticky;
top: 0;
z-index: var(--z-index-sticky);
}
Why modals share one z-index
Modal overlays (backdrops) and modal content use the same --z-index-modal value. When multiple modals stack (e.g. an alert dialog on top of a sheet), DOM order determines which appears on top — later portals paint above earlier ones. A separate overlay z-index would cause the second modal's backdrop to slip behind the first modal's content.
Opting out of isolation
Sections with sticky or fixed positioning that must remain visible above subsequent sections need to opt out of isolation. Otherwise their z-index is trapped inside the section's stacking context and they disappear behind the next section as it scrolls past.
Set rendering: { isolate: false } in your section definition:
export const definition = defineSection({
component: 'SectionStickyHeader',
rendering: { isolate: false },
studio: { label: 'Sticky Header', tags: ['Header'] },
});
<body> by default. Verify that yours do, too.Theming
The laioutr UI Kit uses a sophisticated variable architecture to handle themes. By leveraging Figma Variables, you can change the entire visual identity of your project from colors to typography, with just a few clicks.
B2B
The B2B package provides components and page templates for complex B2B e-commerce scenarios including employee management, order approvals, offers, budgets, and purchasing workflows.