Fixed positioning
Fixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or an established containing block during scrolling.
CSS in Depth, Second Edition
Fixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or a containing block established for fixed positioning.
- How it is used
- Positions modal dialogs and desktop navigation against the viewport so they remain in place during scrolling.
- How deep it goes
- Works through viewport offsets, inset shorthands, a modal implementation, and stacking behavior; leaves built-in dialog behavior to the HTML dialog element.
- Examples
- Uses a scrolling modal with a full-viewport backdrop and a responsive navigation menu docked to the left.
- What you can do after
- Build it from scratch with CSS offsets, then diagnose overlaps by checking markup order and z-index.
Read how CSS in Depth, Second Edition explains fixed positioning →
Web Design Playground, Second Edition
Fixed positioning is a CSS positioning mode that places an element relative to the browser window and keeps it stationary during scrolling.
- How it is used
- Keeps navigation bars or footers visible during scrolling.
- How deep it goes
- Explains viewport anchoring and scrolling, then demonstrates offsets, stacking, and content clearance with a fixed footer.
- Examples
- Uses a photo-gallery footer, a fixed navigation-bar possibility, overlapping elements, and z-index layering.
- What you can do after
- Apply it via CSS by anchoring an element to the viewport and preserving content visibility beneath it.
Read how Web Design Playground, Second Edition explains fixed positioning →
Related concepts
- viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
- sticky positioningcontrasts with · Sticky positioning is a CSS mode in which an element remains in normal flow until an inset threshold, then stays constrained within its containing block while scrolling.
- position propertyconfigured by · The CSS position property specifies an element’s positioning scheme and how positional offsets affect its layout.
- stacking contextproduces · A stacking context is an isolated CSS rendering context in which an element and its descendants are composited within the surrounding stacking order.
- absolute positioningcontrasts with · Absolute positioning is a CSS layout technique that removes an element from normal flow and positions it relative to a containing block, typically established by a positioned ancestor.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.