position 五种取值中，relative 常与 absolute 搭配，sticky 适合滚动跟随，fixed 适合全局悬浮元素。
z-index 只在同一层叠上下文内比较，排查层级问题要先定位"创建了层叠上下文"的祖先。
Chapter 6 · Section 6.1
The Box Model and Positioning
Before diving into Flexbox and Grid, you need a solid foundation: every HTML element generates a rectangular "box" when it is rendered. Understanding how this box is measured, and how it leaves or stays in the normal document flow, is the prerequisite for mastering every layout technique.
The Four Layers of the Box Model
From the inside out, a box consists of four concentric rectangles: the content area, padding, border, and margin.
The layers of the box model
margin
border / padding
content
Layer
Related properties
Description
Content area
width / height
The area that actually holds text, images, and other content
Padding
padding
The space between the content and the border; it inherits the background color
Border
border
The visible line surrounding the padding
Margin
margin
The gap between this box and its neighbors; transparent and not part of the background
box-sizing: Two Ways to Calculate
This is one of the most confusing points for beginners: you set width: 200px, but why does the rendered box end up wider than 200px? The answer depends on box-sizing.
Value
What width/height includes
content-box (default)
Only the content area; the final rendered width = width + padding + border
border-box
Content + padding + border; width is the final rendered width
/* The first line of CSS in almost every modern project */*, *::before, *::after {
box-sizing: border-box;
}
Why border-box is recommendedWith content-box, adjusting the padding or border changes the element's total width and breaks the grid proportions you designed; border-box makes width what-you-see-is-what-you-get, which is why most modern CSS frameworks default to it.
display: Outer and Inner Display Types
display controls two things at once: how this box participates in its parent's arrangement on the "outside" (the outer display type), and how its "inner" children are arranged (the inner display type).
Value
Outer type
Characteristics
block
Block-level
Takes a whole line; width/height can be set
inline
Inline
Does not break lines; width/height have no effect; only horizontal padding/margin apply
inline-block
Inline
Does not break lines, but width/height and vertical padding/margin can be set
none
—
Generates no box; it is removed from the render tree and takes up no space
display: flex and display: grid switch the "inner display type" to flex / grid arrangement, which is the topic of sections 4.2 and 4.3.
The Five Values of position
Value
Removed from the flow?
Positioning reference
static (default)
No
Normal document flow; offset properties have no effect
relative
No
Offset from its original position; the original space is still occupied
absolute
Yes
Relative to the nearest "positioned" ancestor (see below)
fixed
Yes
Relative to the browser viewport; it does not move when scrolling
sticky
No (detaches at the threshold)
Flows normally within the threshold; behaves like fixed past it
relative + absolute example
badge
The parent is set to relative, so the child's absolute positioning uses it as the reference.
The "section contents" sidebar on the left of this tutorial's pages uses position: sticky to follow the scroll. A sticky element needs an explicit top (or left/right/bottom) value to take effect, and it cannot go beyond the visible area of its parent container.
Offset Properties and the Containing Block
Which element does an absolute element position itself against? The rule is: walk up the DOM tree and find the first ancestor whose position is not static — that ancestor is its "containing block". If none is found, the whole document (<html>) is used as the reference. That is why "give the parent relative, position the child with absolute" is the most common combination.
z-index and the Stacking Context
z-index only compares values within a "stacking context", and it only takes effect on elements whose position is not static (and flex/grid items). Stacking contexts do not interfere with one another — however large a z-index is inside a child, it cannot outrank a sibling outside its parent's stacking context.
/* Common properties that create a new stacking context */.modal {
position: fixed;
z-index: 1000;
}
/* opacity < 1, transform, filter, etc. also create a stacking context */
Troubleshooting tipWhen z-index "doesn't work", first check whether the element has left static positioning; then check whether an ancestor higher in its chain created an earlier stacking context that "locks" it into a lower level.
Summary
Use border-box to unify the box model calculation, so width and height are what you see.
display decides how the box is arranged outward and how its children are laid out inward.
Among the five position values, relative is often paired with absolute, sticky suits scroll-following, and fixed suits globally floating elements.
z-index only compares within the same stacking context; to debug layering problems, first locate the ancestor that "created a stacking context".