Skip to content

Position and dimensions

These properties are used to manage the layout of your site.


PropertyDescription
positionDefines the positioning mode (static, relative, absolute, fixed, sticky).
topDefines the vertical position of an element (top).
bottomDefines the vertical position of an element (bottom).
leftDefines the horizontal position of an element (left).
rightDefines the horizontal position of an element (right).
z-indexDefines the stacking order of elements (foreground/background).
displayDefines how an element is displayed (block, inline, flex, grid, etc.).
floatPositions an element floating left or right (mostly replaced today by flex or grid).
clearControls wrapping behavior around floated elements.
clipDefines the visible area of an element (deprecated, replaced by clip-path).
heightDefines the height of an element.
min-heightDefines the minimum height.
max-heightDefines the maximum height.
widthDefines the width of an element.
min-widthDefines the minimum width.
max-widthDefines the maximum width.
marginDefines the outer margins.
margin-topDefines the top outer margin.
margin-rightDefines the right outer margin.
margin-bottomDefines the bottom outer margin.
margin-leftDefines the left outer margin.
paddingDefines the inner spacing.
padding-topDefines the top inner spacing.
padding-rightDefines the right inner spacing.
padding-bottomDefines the bottom inner spacing.
padding-leftDefines the left inner spacing.
text-alignDefines horizontal text alignment inside an element.
vertical-alignDefines vertical alignment of an element (mostly for inline elements and table cells).
overflowDefines how overflowing content is handled (visible, hidden, scroll, auto, clip).

PropertyStatusExplanation
overflow-xNow standardHandles horizontal overflow only.
overflow-yNow standardHandles vertical overflow only.
clipDeprecatedOld property, replaced by clip-path to define visible areas.

  • position and its related properties (top, left, right, bottom) define element placement.
  • z-index controls stacking order.
  • margin and padding manage outer and inner spacing respectively.
  • width, height, min/max-width, min/max-height define dimensions.
  • overflow, overflow-x, overflow-y control overflowing content.
  • float and clear are inherited from old layout techniques: prefer flex or grid today.
  • clip is deprecated — use clip-path instead.