sticky-and-fixed-elements — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited sticky-and-fixed-elements (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
| Property | Behaviour | Use for |
|---|---|---|
position: fixed | Removed from document flow. Always stays at the same viewport position regardless of scroll or parent. | Global navigation header, bottom toolbar, floating action button |
position: sticky | Stays in document flow until it hits its scroll threshold, then locks in place. Returns to flow when parent scrolls past. | Table column headers, section headings in a long list, in-page toolbars within a scroll container |
Prefer `sticky` over `fixed` when the element belongs to a specific section or scroll context. Fixed elements sit above everything and affect the entire viewport — use them only for truly global UI.
The global navigation header is the most common fixed element. It should:
--shadow-sm) signals that content is behind it.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
z-index: var(--z-header);
}Compensate for the fixed header with matching top padding on the page body:
body { padding-top: var(--header-height); }On mobile, the bottom of the screen is the most reachable area with one thumb. A persistent bottom toolbar is the natural home for:
Bottom toolbars should:
padding-bottom: env(safe-area-inset-bottom)On desktop, bottom toolbars are uncommon. Status bars, editor toolbars, and command palettes are the desktop equivalent — these are typically position: fixed at the bottom or position: sticky within their scroll container.
For data tables inside a scroll container, sticky column headers prevent the user from losing track of what each column means.
thead th {
position: sticky;
top: 0;
background: var(--color-surface);
z-index: 1;
}If the table also has a sticky first column (for row identifiers), the top-left cell needs both top: 0 and left: 0, and a higher z-index to sit above both the header row and the sticky column.
Sticky and fixed elements create stacking context. Define z-index as named tokens, not arbitrary numbers:
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-modal: 400;
--z-toast: 500;Every fixed or sticky element must declare its z-index explicitly using a token. Avoid ad-hoc values like z-index: 9999 — they signal an unmanaged stacking context and will eventually conflict.
Each fixed layer removes space from the content area and adds visual complexity. A page should rarely need more than:
A fixed header + fixed bottom toolbar + floating button + sticky sidebar + sticky table header all simultaneously is too many layers. Consolidate where possible.
sticky used for section-scoped elements and fixed only for truly global UI?env(safe-area-inset-bottom) on mobile?~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.