Positioning
Every box starts in normal flow, one below the other. The position property lets you move a box out of that order. Shift box B with position: relative and watch its old space stay behind. Pin a NEW tag to a corner with position: absolute, then make the card its anchor. Finally switch to position: fixed and scroll the page: the tag stays in the corner of the window.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What is the default value of position?
Every box starts as position: static. Static boxes sit in normal flow, and top, right, bottom and left do nothing to them.
02Box B has position: relative; top: 20px; left: 30px;. What happens to box C, just below it?
A relative box is shifted only when drawn. Normal flow still keeps its original space, so the boxes around it do not move.
03A box has position: absolute; top: 0; right: 0;. No ancestor is positioned. What do top and right measure from?
An absolute box is placed against its containing block: the nearest positioned ancestor. With none, that is the initial containing block, which is the size of the viewport and sits at the top of the page.
04How do you pin an absolute tag to the corner of its card instead?
position: relative on the card makes it a positioned ancestor, so it becomes the tag's containing block. The card itself does not move, because it has no offsets.
05You scroll down the page. Which tag stays in the corner of the window?
A fixed box is placed against the viewport, the part of the page you can see, so it stays put while the page scrolls under it. An absolute box scrolls with the page.
Glossary
- Normal flow
- How boxes are laid out when nothing moves them: block boxes stack one below the other, in the order of the HTML.
- position
- The CSS property that picks a positioning scheme: static (the default), relative, absolute, fixed or sticky.
- Positioned box
- A box whose position is anything but static. Only positioned boxes use top, right, bottom and left.
- Offset (inset) properties
- top, right, bottom and left: how far a positioned box sits from a reference edge.
- Out of flow
- Taken out of normal flow: the box takes up no space, so the boxes around it close up as if it were not there.
- Containing block
- The rectangle an absolute box is placed against: the padding box of its nearest positioned ancestor, or else the initial containing block.
- Initial containing block
- A rectangle the size of the viewport, anchored at the top of the page. It scrolls with the page.
- Viewport
- The part of the page you can see in the browser window. A fixed box is placed against it.
Notes and sources
- A real browser lays out the page once with all the rules in force. The figure adds one rule at a time so you can see what each line does.
- The card leaves out the sizes and colours. The full style.css starts with: body { margin: 0; } .card { margin: 16px; padding: 12px; width: 200px; background: #dde3ee; } .tag { width: 48px; height: 24px; margin-bottom: 8px; background: tomato; } .a, .b, .c { width: 120px; height: 40px; margin-bottom: 8px; background: khaki; } .more { height: 400px; }
- The window is 320 by 240 CSS px. The .more box stands in for the rest of a long page, so there is something to scroll. The figure ignores the scrollbar (overlay scrollbars, as on phones, take no space).
- There is one more value, position: sticky. A sticky box scrolls with the page until it reaches an inset such as top: 0, then sticks there while its parent is in view.
- Positioned boxes are painted after (on top of) ordinary boxes, in the order they appear in the HTML. The z-index property changes that order for positioned boxes.
Quiz Unlocks after the last step.