position

What the values mean

• static: the initial value. The element stays in the normal flow and top and the like have no effect.
• relative: shifts the element from its normal place by top and so on. Its original spot stays reserved; nothing moves in to fill it.
• absolute: takes the element out of the flow and places it inside its containing block. Other elements close the gap. The containing block is the nearest ancestor whose position is not static (or a box the size of the first screen of the page if there is none).
• fixed: takes the element out of the flow and places it relative to the browser window (viewport). It stays put when the page scrolls.
• sticky: the element sits in its normal place until scrolling brings it to the given offset inside a scrolling box, then it sticks there. Used for table headers, tables of contents and the like.

The preview here

The box has position: relative so it becomes the containing block, and the second item has bottom: 24px and right: 24px. With absolute the item sits 24px in from the box’s bottom right corner; with relative it moves 24px up and left from its own spot. Pick fixed and the item leaves the preview for the bottom right of the screen. sticky stays in place because this box doesn’t scroll.

Watch out

• absolute and fixed elements shrink to fit their content. Even a block no longer fills the width, and item 2 here loses the height it was stretched to in the flexbox.
• Elements that are not static are painted in front of ordinary ones. Change the order with z-index.
• If an ancestor has transform or filter, a fixed element is placed relative to that ancestor instead of the screen.
• sticky needs at least one of top and the like to stick. An ancestor with overflow: hidden or similar becomes the scrolling box it sticks in, so it won’t stick when the page scrolls.