FixedBottom

Fixedbottom is a web design concept describing an element that remains anchored to the bottom edge of the viewport as the page scrolls. It is commonly used for navigation bars, action bars, or chat widgets that should remain visible.

Implementation relies on CSS fixed positioning: position: fixed; bottom: 0; left: 0; right: 0; width: 100%; The element sits above normal content using z-index, and may include a high-contrast background and padding to accommodate contents. For mobile devices, support includes using the CSS env() function to account for safe-area-inset-bottom to avoid overlap with device UI.

Common use cases include bottom navigation on mobile, persistent call-to-action bars, and floating chat widgets. It can also be used for cookie notices or status bars. Note that fixed bottom elements can obscure content or interfere with on-screen keyboards.

Considerations: ensure accessibility by providing aria-label or role="navigation" if it's navigation, maintain adequate contrast, ensure the bar can be dismissed if appropriate, and provide a way to access content behind it via proper focus management.

Relation and variants: Some frameworks refer to this as fixed-bottom or bottom-fixed components; Bootstrap uses a fixed-bottom class. Fixedbottom differs from sticky bottom in that the latter may reflow with scrolling or content height. Related concepts include bottom sheets and sticky footers.