CSS Position Training Content

What is CSS Position

CSS position is used to control how elements are placed on a web page. It helps you move elements and manage layout more precisely.

There are four main types of position values. These are static, relative, absolute, and fixed.

Static Position

Static is the default position for all elements. When an element is set to static, it follows the normal flow of the page. You cannot move it using top, bottom, left, or right properties.

Example

div {
  position: static;
}

Use static when you want elements to appear in their natural order without any special positioning.

Relative Position

Relative position allows you to move an element from its original position. The space it originally occupied remains the same.

Example

div {
  position: relative;
  top: 10px;
  left: 20px;
}

This means the element will move slightly from where it normally appears.

Use relative when you want small adjustments without affecting other elements.

Absolute Position

Absolute position removes the element from the normal flow of the page. It is positioned relative to the nearest parent element that has a position other than static.

Example

div {
  position: absolute;
  top: 0;
  right: 0;
}

If no parent has a position set, the element will be placed relative to the whole page.

Use absolute when you need exact placement of elements like dropdowns or overlays.

Fixed Position

Fixed position keeps the element in the same place even when the page is scrolled. It is always positioned relative to the browser window.

Example

div {
  position: fixed;
  bottom: 0;
  right: 0;
}

Use fixed for elements like navigation bars, chat buttons, or back to top buttons.

Summary

Static follows normal page flow
Relative moves from original position
Absolute is positioned based on parent
Fixed stays in place on the screen