Absolute positioning
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.
CSS in Depth, Second Edition
Absolute positioning removes an element from normal flow and positions it relative to a containing block, typically established by a positioned ancestor.
- How it is used
- Places controls and popup menus over nearby content without shifting the surrounding layout.
- How deep it goes
- Explains containing-block selection and inset placement through worked UI examples, then addresses overlapping elements through stacking order.
- Examples
- Uses a modal Close button, a click-controlled dropdown, and a mobile navigation button.
- What you can do after
- Build it from scratch: anchor an overlay to a positioned ancestor and diagnose unexpected placement or overlap.
Read how CSS in Depth, Second Edition explains absolute positioning →
Tiny CSS Projects
Absolute positioning is a CSS positioning technique that removes an element from normal flow and positions it relative to a containing block established by a positioned ancestor.
- How it is used
- Positions a card face over another and moves mobile table headers offscreen without removing their information from assistive technologies.
- How deep it goes
- Explains normal-flow removal, ancestor-based placement, unset offsets, and sizing effects through CSS declarations.
- Examples
- Shows an overlaid card back and a table header shifted offscreen while data-attribute labels identify mobile cells.
- What you can do after
- Operate/configure it with CSS offsets to overlay card faces or hide table headers visually while retaining their information for assistive technologies.
Related concepts
- containing blockuses · A CSS reference rectangle used to resolve certain descendant properties, including an element's dimensions and position.
- dropdownconfigures · A dropdown is a user-interface control that presents a set of choices for user selection, often revealing them when activated.
- strong elementused by · The HTML strong element marks content as having strong importance, seriousness, or urgency.
- viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
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.