UNDERSTANDING CSS POSITION PROPERTY

UNDERSTANDING CSS POSITION PROPERTY

POSITION property is used to specify the position of an element in a document. It works with the top, right, bottom, left (“location properties”) and z-index properties to determine the final location of the positioned element.

This property has five (5) main VALUES which are:

  1. STATIC
  2. RELATIVE
  3. ABSOLUTE
  4. FIXED
  5. STICKY

position property values.jpg

STATIC: (position: static)

Element is positioned according to the normal flow of the document. Top, right, bottom, left and z-index properties do not have any effect on the position of the element. This is the DEFAULT value.

RELATIVE: (position: relative )

Element is positioned according to the normal flow of the document like static elements. But unlike static elements, top, right, bottom, left and z-index properties have effect on the position of the element.

The element will offset relative to its position based on the values of the “location properties” (top, right, bottom and left) i.e. the element will be pushed from its original position from the direction and in the distance specified by the “location properties” (e.g. top: 20px; means to move 20px down from the top). The offset does not affect any other element as the space given to the element in the page layout remains.

ABSOLUTE: (position: absolute )

Element is removed from the normal flow of the document. No space is created/left for the element in the page layout, other elements will behave as if the element has been removed completely/is not in the document (it affects other elements since it is removed from the document flow).

An element with position: absolute; is positioned relative to its positioned parent element or closest positioned ancestor (if the parent element is not positioned). Otherwise, (if neither the parent element nor any of the ancestor element(s) is positioned i.e. has non static position) it will be positioned relative to the <html> element (root).

The values of top, right, bottom and left properties determine the final position of the element.

FIXED: (position: fixed)

Element is similar to absolutely positioned element (removed from the normal document flow, no space is created/left for the element in the page layout). But unlike absolutely positioned element (positioned relative to its positioned parent element or closest positioned ancestor), it is always positioned relative to the <html> element (root).

Its final position is determined by the values of top, right, bottom, and left properties.

Fixed positioned elements are not affected by scrolling (they stay fixed on the screen in the same position).

STICKY: (position: sticky)

Element is positioned according to the normal flow of the document. It is a combination of position: relative and position: fixed. It behaves like a relatively positioned element until a certain scroll point (distance specified with the top, right, bottom and/or left properties) where it then behaves like a fixed element.

Sticky element is only fixed positioned while inside its parent element. When you scroll beyond its parent element it changes to relative positioned.

You can use position: sticky to move an element that does not already start at the position you want to fix it to.

..................................................................................................................................

NOTE: A POSITIONED element is an element whose position is anything (any of the position values) but static.

Like is applicable to other CSS properties, one gets better with constant practice; so keep practicing and feel free to play around with the property and its different values.

..................................................................................................................................

Follow me on Twitter

Join ROTARY today!