10 - Positioning

Tests position: static, relative, absolute.

position: static (default — flows normally)

static

position: relative — offset from normal position (top:10px left:30px)

normal

relative

normal

position: absolute — placed relative to nearest positioned ancestor

in flow

abs top-right

abs bottom-left

z-index: overlapping elements

z:1

z:3

z:2

Expected: static boxes flow normally, relative box is nudged, absolute boxes pin to corners, z-index controls overlap order (green on top, blue middle, red bottom).

Back to index