Home

CSS Position Cheat Sheet

Position Tags
Tag Name Description
<static> static Default value. Elements are positioned according to the normal flow of the document.
<relative> relative Relative to itself. Elements are positioned relative to their normal position, allowing top, right, bottom, left adjustments.
<absolute> absolute Relative to the nearest positioned ancestor. Element is removed from the normal flow and placed relative to its closest positioned ancestor.
<fixed> fixed Relative to the viewport. Element is removed from the normal flow and positioned relative to the browser window, staying in the same place even when scrolled.
<sticky> sticky Switches between relative and fixed. Element is treated as relative until it crosses a specified threshold within the viewport, at which point it is treated as fixed.
<top> top Offsets from respective edges. Used with position to place the element by specifying values from the top, right, bottom, and left edges of the nearest positioned ancestor.
<right> right
<bottom> bottom
<left> left
<z-index> z-index Stacking order. Controls the stack order of an element, useful when elements overlap; higher values are closer to the front.