sticky-and-fixed-elements

To keep a navigation header visible during scrolling without losing content space, use sticky positioning for section-scoped elements or fixed positioning for global controls. You must apply layout compensation, background separation, and z-index management to prevent overlapping content.

Implementing a mobile bottom toolbar requires fixed positioning combined with safe-area inset support and content offsets. This ensures the toolbar remains accessible without obscuring usable content space or overlapping device interface boundaries.

Use sticky positioning when UI controls are section-scoped, like sticky table headers, and fixed positioning for global elements like floating action buttons. Deliberate positioning choices prevent confusing stacking behavior and excessive fixed layers.

Manage overlapping fixed layers in responsive web interfaces by applying tokenized z-index management. This approach organizes stacking orders logically, preventing confusing stacking behavior when multiple persistent UI patterns render simultaneously.

A sticky table header overlaps content when layout compensation and background separation are missing. Applying proper content offsets and background separation ensures the persistent header remains visually distinct without obscuring data rows.

Yes, the Skill provides the necessary CSS for persistent UI patterns including floating action buttons and mobile bottom toolbars. It dictates positioning choices and generates styles that account for responsive layout constraints.