Chapter 6: Positioning and stacking contexts
Introduces the position property, defines when an element is considered positioned, and contrasts positioning with earlier flow-based layout methods.
After this chapter you will be able to
- Positioning versus document flow. Explain how the section contrasts positioning with earlier layout methods and what visual effects it enables.
- Viewport offsets and dimensions. Explain that position: fixed places an element relative to the viewport using top, right, bottom, and left, and that setting offsets on opposite sides implicitly determines its size.
- Viewport filling modal backdrop. Explain how fixed positioning, inset, and a translucent background make the backdrop cover and darken the page.
- Fixed modal body placement. Describe how the modal body is placed within the viewport and what happens when the page scrolls.
- Modal page scroll lock. Explain why the page behind an open modal should not scroll and how adding and removing a body class disables scrolling only while the modal is open.
- Fixed element sizing. Explain how selected side offsets, width or height, and natural content size can determine a fixed element’s size without specifying all four sides.
- Content clearance around fixed elements. Explain why page content can pass behind a fixed element and describe the margin remedy for a persistent side menu.
- Absolute positioning containing block. Explain that absolute positioning uses the closest-positioned ancestor as its containing block rather than the viewport, and that inset properties place the element’s edges within that block.
- Close button positioning. Explain how the Close button is placed near the modal dialog’s top-right corner using absolute positioning and top and right offsets.
- Accessible Close button text. Explain why the button should retain the word “close” in its HTML even when it visually displays an ×.
- Pseudo-element icon placement. Describe how the CSS hides the visible word “close” and places an × in the button using an absolutely positioned ::after pseudo-element.
- Relative shifts and document flow. Explain what changes when an element receives position: relative and then an inset value, including what happens to surrounding elements.
- Containing block purpose. State the more common reason given for applying position: relative instead of merely nudging an element.
- Dropdown positioning and layout. Explain why the dropdown container is relatively positioned and its menu is absolutely positioned.
- Toggle state and visibility. Trace how pressing the toggle button opens and closes the menu through JavaScript and CSS.
- Keyboard-accessible dropdown interaction. Explain why this dropdown uses a pressable toggle rather than relying on hover, and describe the keyboard interactions given.
- Border triangle construction. Explain how thick borders on a zero-sized element form triangles and how a visible top border with transparent side borders creates a down-pointing arrow.
- Dropdown arrow placement and state. Describe how the dropdown label’s ::after pseudo-element becomes a positioned arrow, and how its direction changes when the menu opens.
- Positioned element stacking conflicts. Describe how overlapping positioned elements can appear in an unexpected front-to-back order, as when the page’s dropdown appears in front of its modal dialog.
- Source Order and Paint Order. Explain why, when overlapping elements have no positioning applied, an element later in the HTML appears in front of an earlier one.
- Positioned Elements Stacking Order. Describe how positioning changes paint order while preserving source-dependent stacking among positioned elements.
- Z-index stacking order. Explain how z-index values determine which elements appear in front, and apply that rule to the modal and its backdrop.
- Z-index applicability and context. State the two cautions about using z-index: it works only on positioned elements, and applying it to one establishes a stacking context.
- Stacking contexts as units. Explain that a stacking context contains a root and its descendants, which the browser paints together. Describe why an element inside a context cannot be stacked between elements outside it, even with a high z-index.
- Internal stacking order. State the back-to-front order given for elements within a stacking context, distinguishing negative, auto, and positive z-index positioned elements from nonpositioned elements.
- Stacking problem diagnosis. Describe how to investigate an unexpected z-index result by finding an ancestor stacking-context root and adjusting the context as a whole. Explain why unnecessary or large contexts can complicate this work.
- Sticky scrolling behavior. Explain how a sticky-positioned element scrolls normally until it reaches a specified point, then stays in place as the page continues to scroll.
- Parent bounds on sticking. Explain why the sticky menu cannot remain stuck beyond its parent and why the parent needs to be taller than the menu.
What it builds on
- Normal document flow (chapter 3) · Introduces normal document flow as a basis for comparison.
- Using logical properties (chapter 3) · Introduces the distinction between logical and physical CSS properties.
- Custom properties (aka CSS variables) (chapter 2) · Using CSS custom properties.
Section by section
Introduction
Introduces the position property, defines when an element is considered positioned, and contrasts positioning with earlier flow-based layout methods.
- Static and positioned elements: Distinguish an element with the default static position value from one whose position value has been changed.
Why it matters: This distinction clarifies what the chapter means when it calls an element positioned. - Positioning versus document flow: Explain how the section contrasts positioning with earlier layout methods and what visual effects it enables.
Why it matters: It explains why positioning can create layouts and overlaps that ordinary flow-based layout does not.
Key terms: position property, static, positioned, document flow, positioning, overlapping
6.1 Fixed positioning
Explains how fixed positioning uses viewport-relative offsets and how inset shorthands express those offsets.
- Viewport offsets and dimensions: Explain that position: fixed places an element relative to the viewport using top, right, bottom, and left, and that setting offsets on opposite sides implicitly determines its size.
Why it matters: This lets you predict both where a fixed element appears and how much space it occupies. - Inset shorthand and logical variants: Describe how inset can replace separate side-offset declarations, including what inset: 0 means and how the related block and inline shorthands group logical sides.
Why it matters: These shorthands can make declarations for several positioning offsets less verbose.
Key terms: position: fixed, viewport, top, right, bottom, left, inset, inset-block, inset-inline, inset-block-start
6.1.1 Creating a modal dialog with fixed positioning
Builds a modal dialog whose backdrop and content stay in place over a scrolling page by using fixed positioning.
- Modal structure and visibility: Describe the modal’s backdrop and body, and explain how the example opens and closes the dialog.
Why it matters: Separating the backdrop from the dialog content makes each part’s styling purpose clear. - Viewport filling modal backdrop: Explain how fixed positioning, inset, and a translucent background make the backdrop cover and darken the page.
Why it matters: The backdrop draws attention to the dialog without completely hiding the page beneath it. - Fixed modal body placement: Describe how the modal body is placed within the viewport and what happens when the page scrolls.
Why it matters: Viewport-based placement keeps the dialog visible even as the underlying page moves.
Key terms: modal dialog, modal-backdrop, modal-body, is-open, display: none, display: block, fixed positioning, inset, alpha, viewport
6.1.2 Preventing the screen from scrolling while the modal dialog is open
This section explains how to prevent the page behind an open modal dialog from scrolling while keeping the modal’s visual behavior in CSS.
- Modal page scroll lock: Explain why the page behind an open modal should not scroll and how adding and removing a body class disables scrolling only while the modal is open.
Why it matters: It keeps the background page from moving while a reader is using the modal. - Class toggling and CSS alternative: Describe how toggling a class keeps JavaScript simple and state the CSS :has() alternative presented for selecting the body while the modal is open.
Why it matters: It shows how the modal’s state can drive CSS without putting the styling logic in JavaScript.
Key terms: overflow: hidden, body, no-scroll class, modal, body.no-scroll, :has(), body:has(.modal.is-open), is-open class
6.1.3 Controlling the size of positioned elements
This subsection explains how to size a fixed-positioned element with selected offsets and how to keep page content from flowing behind it.
- Fixed element sizing: Explain how selected side offsets, width or height, and natural content size can determine a fixed element’s size without specifying all four sides.
Why it matters: This lets you anchor an element to the screen without forcing both of its dimensions. - Content clearance around fixed elements: Explain why page content can pass behind a fixed element and describe the margin remedy for a persistent side menu.
Why it matters: Without space reserved for a persistent menu, page content may be hidden behind it.
Key terms: fixed element, width, height, naturally, document flow, right-margin
6.2 Absolute positioning
Introduces absolute positioning by contrasting its containing block with fixed positioning and explaining how inset properties place its edges.
- Absolute positioning containing block: Explain that absolute positioning uses the closest-positioned ancestor as its containing block rather than the viewport, and that inset properties place the element’s edges within that block.
Why it matters: The containing block determines what an absolutely positioned element’s inset values are measured against.
Key terms: absolute positioning, containing block, closest-positioned ancestor element, inset properties
6.2.1 Absolutely positioning the Close button
This subsection uses an absolutely positioned Close button to show how CSS chooses its containing block and applies top and right offsets.
- Close button positioning: Explain how the Close button is placed near the modal dialog’s top-right corner using absolute positioning and top and right offsets.
Why it matters: The offsets only make sense when you know which box they are measured from. - Containing block ancestor search: Describe how the browser finds a containing block for an absolutely positioned element when its parent is not positioned, including the case where no ancestor is positioned.
Why it matters: An absolutely positioned element’s offsets may refer to an ancestor other than its immediate parent.
Key terms: absolute positioning, containing block, modal-body, positioned element, initial containing block
6.2.2 Positioning a pseudo-element
Shows how to display an × on an absolutely positioned Close button while keeping meaningful button text for screen readers.
- Accessible Close button text: Explain why the button should retain the word “close” in its HTML even when it visually displays an ×.
Why it matters: The visual icon need not come at the expense of a meaningful button label. - Pseudo-element icon placement: Describe how the CSS hides the visible word “close” and places an × in the button using an absolutely positioned ::after pseudo-element.
Why it matters: Separating the visible icon from the button text lets CSS control its appearance and placement without changing the label.
Key terms: screen readers, HTML, Close button, text-indent, overflow, content, ::after pseudo-element, absolute positioning, containing block
6.3 Relative positioning
This section explains how relative positioning shifts an element without moving its neighbors and why it is often used as a containing block for absolute positioning.
- Relative shifts and document flow: Explain what changes when an element receives position: relative and then an inset value, including what happens to surrounding elements.
Why it matters: This explains why nudging an element can create an overlap without making room for it. - Inset directions and limits: Describe how inset values shift a relatively positioned element and what they cannot do in this section’s example.
Why it matters: Inset values are offsets here, not a way to resize the element. - Containing block purpose: State the more common reason given for applying position: relative instead of merely nudging an element.
Why it matters: It identifies the practical role the section emphasizes for relative positioning.
Key terms: position: relative, inset properties, normal document flow, top, bottom, left, right, containing block, absolutely positioned element
6.3.1 Creating a dropdown menu
This section builds a click-operated dropdown menu and explains how positioning, CSS state, and keyboard access work together.
- Dropdown positioning and layout: Explain why the dropdown container is relatively positioned and its menu is absolutely positioned.
Why it matters: This lets the menu pop open without moving the surrounding page. - Menu alignment and width: Describe how the menu’s offsets and minimum width place it beneath the toggle, and when right alignment is preferable.
Why it matters: These settings keep the popup aligned with its toggle and can prevent it from extending past the screen edge. - Toggle state and visibility: Trace how pressing the toggle button opens and closes the menu through JavaScript and CSS.
Why it matters: Separating the state change from its styling makes the button control whether the menu is shown. - Keyboard-accessible dropdown interaction: Explain why this dropdown uses a pressable toggle rather than relying on hover, and describe the keyboard interactions given.
Why it matters: An interactive menu needs to work for people who navigate without a mouse.
Key terms: relative positioning, absolute positioning, containing block, left: 0, top: 2.1em, min-width: 100%, right: 0, toggle button, is-open class, opened and closed styles
6.3.2 Creating a CSS triangle
Shows how to make a CSS border triangle and use it as a state-changing arrow on a dropdown label.
- Border triangle construction: Explain how thick borders on a zero-sized element form triangles and how a visible top border with transparent side borders creates a down-pointing arrow.
Why it matters: This lets you draw a small arrow with CSS borders rather than an image. - Dropdown arrow placement and state: Describe how the dropdown label’s ::after pseudo-element becomes a positioned arrow, and how its direction changes when the menu opens.
Why it matters: The arrow makes the dropdown’s hidden content and open state easier to recognize.
Key terms: borders, transparent, top border, dropdown-toggle::after, absolute positioning, padding, top
6.4 Stacking contexts and z-index
The section explains why positioned elements need care and illustrates a stacking problem in which a dropdown appears in front of a modal dialog.
- Positioned element stacking conflicts: Describe how overlapping positioned elements can appear in an unexpected front-to-back order, as when the page’s dropdown appears in front of its modal dialog.
Why it matters: Recognizing the unexpected overlap is the starting point for fixing the page’s stacking problem. - Responsibilities outside document flow: Explain why removing an element from document flow requires care to keep it visible and avoid covering important content.
Why it matters: Positioning can make an element or other important content inaccessible to the user.
Key terms: positioned elements, stacking, modal dialog, dropdown, document flow, browser viewport, overflow
6.4.1 Understanding the rendering process and stacking order
Explains how paint order and positioning determine which overlapping elements appear in front, and why moving a modal in the markup can sometimes resolve a stacking problem.
- Source Order and Paint Order: Explain why, when overlapping elements have no positioning applied, an element later in the HTML appears in front of an earlier one.
Why it matters: It explains why overlapping elements can cover one another even without positioning or z-index. - Positioned Elements Stacking Order: Describe how positioning changes paint order while preserving source-dependent stacking among positioned elements.
Why it matters: It explains why adding positioning can change which element covers another without changing the HTML. - Modal Markup Order Workaround: Explain why moving a fixed-positioned modal after a dropdown in the markup can put it in front, and why moving markup is not generally a suitable fix for relative or absolute positioning.
Why it matters: It shows when changing markup order is a practical stacking fix—and when it may disturb positioning.
Key terms: render tree, paint, source order, positioned elements, nonpositioned elements, source-dependent stacking, modal, dropdown menu, fixed positioning, relative positioning
6.4.2 Manipulating stacking order with z-index
This section shows how z-index changes stacking order and identifies two limits to its use.
- Z-index stacking order: Explain how z-index values determine which elements appear in front, and apply that rule to the modal and its backdrop.
Why it matters: You can control which part of the modal appears on top without relying solely on HTML structure. - Z-index applicability and context: State the two cautions about using z-index: it works only on positioned elements, and applying it to one establishes a stacking context.
Why it matters: These cautions help explain why a z-index value may not have the expected effect.
Key terms: z-index, modal-backdrop, modal-body, positioned elements, static elements, stacking context
6.4.3 Understanding stacking contexts
This section explains why stacking contexts constrain z-index, how elements are ordered within them, and how to manage and debug stacking problems.
- Stacking contexts as units: Explain that a stacking context contains a root and its descendants, which the browser paints together. Describe why an element inside a context cannot be stacked between elements outside it, even with a high z-index.
Why it matters: It explains why raising a child’s z-index sometimes has no visible effect. - Stacking context creation: Describe the ways this section says a stacking context can be created, including a positioned element with z-index and properties or positioning modes that create one without it.
Why it matters: A stacking boundary may come from a style other than z-index. - Internal stacking order: State the back-to-front order given for elements within a stacking context, distinguishing negative, auto, and positive z-index positioned elements from nonpositioned elements.
Why it matters: This order helps explain which elements appear in front of others inside the same context. - Stacking problem diagnosis: Describe how to investigate an unexpected z-index result by finding an ancestor stacking-context root and adjusting the context as a whole. Explain why unnecessary or large contexts can complicate this work.
Why it matters: Checking ancestor contexts is more useful than repeatedly increasing a trapped child’s z-index. - Controlled stacking and positioning: Explain the section’s practical advice for keeping z-index values understandable and limiting positioning when other layout methods can do the work.
Why it matters: Clear layer priorities and fewer positioning constraints make a page easier to change and debug.
Key terms: stacking context, root, descendant elements, z-index, opacity, transform, filter, fixed positioning, sticky positioning, document root
6.5 Sticky positioning
Explains how sticky positioning keeps a sidebar visible during scrolling while confining it to its parent.
- Sticky scrolling behavior: Explain how a sticky-positioned element scrolls normally until it reaches a specified point, then stays in place as the page continues to scroll.
Why it matters: This explains why sidebar navigation can remain visible without being fixed from the start. - Sidebar sticking point: Describe how the example places a sticky menu in a right-hand sidebar and uses top to set where it locks in place.
Why it matters: The example connects the scrolling behavior to a concrete sidebar layout and sticking point. - Parent bounds on sticking: Explain why the sticky menu cannot remain stuck beyond its parent and why the parent needs to be taller than the menu.
Why it matters: The parent’s bounds explain both why the menu eventually moves again and why a short sidebar may not stick at all.
Key terms: sticky positioning, fixed positioning, affix menu, top, flex container, parent element, col-sidebar, min-height
6.6 Summary
Where this is used later
- Creating a mobile menu (chapter 7) · Using a pseudo-element for displayed content
- Responding to user interaction (chapter 17) · Absolutely positioning a pseudo-element.
Concepts explained in this chapter
- relative positioningRelative positioning is a CSS positioning mode that keeps an element in normal flow while allowing offsets and establishing a containing block for positioned descendants.
- absolute positioningAbsolute positioning removes an element from normal flow and positions it relative to a containing block, typically established by a positioned ancestor.
- fixed positioningFixed 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.
- stacking contextA stacking context is an isolated group of elements whose painting order is resolved together within the surrounding stacking order.
- positioned elementA positioned element is an element whose position property establishes a positioning mode that allows offset and stacking behavior beyond normal flow.
- z-indexThe z-index property specifies the stacking order of a positioned or stacking-context element.
- inset propertyThe CSS inset property is a shorthand property that sets an element's top, right, bottom, and left offsets.
- containing blockA CSS containing block is the reference rectangle used to resolve an element's dimensions and positions.
- dropdownA dropdown is an interface control that reveals a list or panel of selectable options when activated.
- borderThe CSS shorthand property that specifies an element's border width, style, and color.
- buttonAn HTML button is an interactive form control that can be activated to perform an action.
- height propertyThe height property specifies the vertical extent of an element's content box or other applicable box.
- hiddenThe hidden value of the CSS visibility property suppresses an element's visible rendering while preserving its space in document flow.
- overflow propertyThe CSS overflow property specifies how content that exceeds an element's box is displayed, clipped, or made scrollable.
- CSS variableA CSS custom property is an author-defined CSS property whose name begins with two hyphens and whose value can be substituted with the var() function.
- opacityThe CSS opacity property specifies the compositing opacity of an element and its contents.
- margin propertyThe CSS margin property sets the outer spacing around an element, with physical sides including top, bottom, left, and right margins.
- normal flowNormal flow is the CSS layout model that positions elements according to their order and formatting contexts 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.