12
1 min read
Borders, breakpoints, z-index
The menu is z-index: 9999. The modal is 10. Borders are 1px here and 1.5px there. Breakpoints are whatever the last file used.
These are tokens too. Name the layers. Name the widths. Name the breakpoints. A collision is what happens when the values stay raw.
The specimen is the stack. Both layers are already open. Raw numbers collide on the left. Named layers keep the modal on top.
WorkspaceAccount
menuDelete…
modal
Delete this workspace?
menuz-index 9999
modalz-index 10
WorkspaceAccount
menuDelete…
modal
Delete this workspace?
menuz.dropdown
modalz.modal
z.dropdown under z.modal. The same rule names border.width.sm and breakpoint.md. The numbers can change. The names cannot.
:root {
--z-header: 10;
--z-dropdown: 20;
--z-modal: 40;
}
.menu { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }:root {
--z-header: 10;
--z-dropdown: 20;
--z-modal: 40;
}
.menu { z-index: var(--z-dropdown); }
.modal { z-index: var(--z-modal); }