Relative Position
Absolute Positioning
Layout
A CSS layout method that removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. This technique is useful for overlays, badges, and decorative elements that need precise placement regardless of surrounding content. Use sparingly, as absolutely positioned elements don’t affect the layout of other elements and can cause overlap issues on different screen sizes.
Fixed Position
Layout
A positioning method that anchors elements relative to the browser viewport, keeping them visible during scrolling. Fixed elements are useful for sticky navigation, floating action buttons, and persistent calls to action. Use fixed positioning sparingly to avoid blocking content and reducing usable space.
Scale
Motion
The relative size of elements in relation to each other and the overall design, establishing hierarchy and emphasis. Scale creates visual drama—dramatically larger elements command attention while smaller ones recede. Consider how scale relationships change across breakpoints in responsive designs.