CSS Position Property

A webpage has number of HTML elements and sometimes different elements need to align different kind of positioning for better page layout.

The CSS position property is used to specify the type of positioning for HTML Elements.

Type of CSS position properties

You can use four different positions for elements.

  • Static
  • Relative
  • Fixed
  • Absolute

We will learn about each of them with example.


CSS Position Static

This is the default position of HTML elements. A static position element according to the normal flow of the HTML page. There is no use of CSS top, bottom, left, and right properties if html element has static position.


CSS Position Relative

HTML Element with Relative Position is positioned relative to its normal position. By default relative positioning works similar to static unless positioning you add some extra properties. You can use CSS top, bottom, left, and right properties to move element accordingly.


CSS Position Fixed

A CSS fixed element is positioned relative to the viewport or browser window. Fixed positioned element always stays in the same place even if you scroll page.

You can use CSS top, bottom, left, and right properties to fix element somewhere in browser.


CSS Position Absolute

A CSS absolute element is positioned relative to the first parent element. If there is no parent element, position will be related to page. Therefore, absolute positioned element works like fixed but its position is related to nearest positioned parent (ancestor) instead of relative to the viewport window.

You can use CSS top, bottom, left, and right properties to fix element related to parent element.


Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.