Skip to main content

Position static

The position: static value is the default positioning for every HTML element. When an element is static, it adheres strictly to the normal document flow.

Understanding static is fundamental because it defines the baseline from which all other positioning values (relative, absolute, fixed, sticky) deviate.


Key Characteristics of position: static​

1. Follows Normal Document Flow​

A static element is laid out according to the standard rules of CSS:

  • Block elements stack vertically.
  • Inline elements flow horizontally.
  • The element's position is determined solely by its margin and the dimensions of its content and Box Model.

2. Ignores Offset Properties (Crucial)​

Elements with position: static completely ignore the following offset properties:

  • top
  • right
  • bottom
  • left
  • z-index

Even if you set top: 50px; on a static element, it will have absolutely no effect on its position.

3. All Box Model Properties Apply​

The element still fully respects width, height, padding, and margin (including auto margins for centering). It is only the position offset that is ignored.

Practical Application​

You rarely explicitly declare position: static; because it is the default. Its main use case is when you need to override a positioning value inherited from a parent or set earlier in your stylesheet.


Example: Resetting Positioning​

If you have a complex component library where many elements are set to position: relative;, you might need to ensure a specific child element ignores that behavior:

styles.css
.component-wrapper {
  /* All children inherit position: relative; */
  position: relative; 
}

/* This specific element must follow normal flow */
.child-element-to-reset {
  position: static; 
  /* Now it ignores any inherited top/left offsets */
}

Interactive position: static Demo​

In the demo below, try adjusting the top and left values in the CSS. You will see they have no effect on the red box because it is set to position: static (the default).