Position property
The CSS position property specifies an element’s positioning scheme and how positional offsets affect its layout.
Web Design Playground, Second Edition
The CSS position property specifies the positioning scheme used to lay out an element.
- How it is used
- Breaks elements out of default page flow to control placement, scrolling behavior, and overlap.
- How deep it goes
- Defines all five values and offsets, then works through absolute ancestors and sticky thresholds without detailing every mode equally.
- Examples
- Uses sticky navigation links and absolutely positioned tooltips, spans, and nested strong elements.
- What you can do after
- Apply it via CSS to place elements, create sticky navigation, build tooltips, and layer overlaps with z-index.
Read how Web Design Playground, Second Edition explains position property →
Tiny CSS Projects
The CSS position property specifies how an element is positioned in the document layout.
- How it is used
- Uses positioning to layer and align the two faces of an interactive virtual credit card.
- How deep it goes
- Explains relative and absolute positioning, containing ancestors, normal-flow removal, sizing, and top-left offsets without surveying other position values.
- Examples
- Demonstrates stacked credit-card faces and a relatively repositioned drop cap.
- What you can do after
- Apply it via CSS to layer interface elements or fine-tune their placement relative to a container or surrounding text.
Related concepts
- offset propertyuses · A CSS offset property specifies an element’s distance from an edge of its positioning context.
- sticky positioningconfigures · 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.
- fixed positioningconfigures · 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.
- relative positioningconfigures · Relative positioning offsets an element from its normal position while preserving its space in normal document flow.
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.