Relative positioning
Relative positioning offsets an element from its normal position while preserving its space in normal document flow.
Web Design Playground, Second Edition
Relative positioning is a CSS layout technique that visually shifts an element from its normal position while preserving its place in normal document flow.
- How it is used
- Positions an element with small visual offsets while preserving its normal-flow space, often preparing a container for absolute positioning.
- How deep it goes
- Explains offset directions, negative values, measurement units, preserved gaps, and a practical absolute-positioning context without deeper layout internals.
- Examples
- Demonstrates a downward-shifted span with a visible gap and a portfolio before-and-after image overlay.
- What you can do after
- Apply it via CSS positioning properties to nudge elements and establish a positioning context for absolute children.
Read how Web Design Playground, Second Edition explains relative positioning →
CSS in Depth, Second Edition
Relative positioning is a CSS positioning mode that keeps an element in normal flow while allowing offsets and establishing a containing block for positioned descendants.
- How it is used
- Anchors absolutely positioned descendants while keeping the anchor in normal document flow.
- How deep it goes
- Explains offset behavior and containing blocks through worked menus, then connects positioning to stacking order without detailing browser layout internals.
- Examples
- Uses shifted inline-block elements, a click-operated dropdown, and a mobile navigation menu.
- What you can do after
- Build it from scratch: anchor an absolutely positioned dropdown to its toggle using CSS and a JavaScript-controlled open state.
Read how CSS in Depth, Second Edition explains relative positioning →
Tiny CSS Projects
Relative positioning offsets an element from its normal position while preserving its original space in the document flow.
- How it is used
- Establishes local positioning contexts and makes small visual adjustments in card layouts and typography.
- How deep it goes
- Explains parent-child positioning and directional offsets, while demonstrating layering through absolute positioning rather than detailing browser internals.
- Examples
- Demonstrates a virtual credit card overlay and a decorative drop cap adjusted within paragraph text.
- What you can do after
- Apply it via CSS to establish local positioning contexts or nudge elements within their normal layout.
Related concepts
- containing blockconfigures · A CSS reference rectangle used to resolve certain descendant properties, including an element's dimensions and position.
- offsetuses · An offset is a position or displacement measured relative to a reference point, such as within an ordered sequence, memory region, or layout.
- inset propertyuses · The CSS inset property is a shorthand property that sets an element's top, right, bottom, and left offsets.
- translate functionalternative to · The CSS translate() transform function moves an element along one or more spatial axes without changing its layout dimensions.
- normal flowuses · Normal flow is the browser’s ordinary layout process, arranging elements according to document order and their formatting behavior without out-of-flow positioning.
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.