CSS Position

CSS position plays an important role to define the structure of the HTML element on a web page. By using CSS position property, you can define an HTML element’s position at a particular location on that the web page where it wants to display.

Now, we will discuss how you can use all different values of CSS position in different conditions. Basically, The CSS position can have five values which are listed below:

Values Of CSS Positioning

  • position: static
  • position: relative
  • position: fixed
  • position: absolute
  • position: sticky

The CSS positioning has four different values like the Top, Bottom, Left, and Right. Let's discuss all CSS position property one by one:

CSS Static Position

By default, all HTML elements are in a static position and the static position can not be affected by the value top, bottom, left, and right. CSS static position work with the normal flow of web page.

Example: Static Position


Hello! This is a div element. Now we are going to set position as static.

CSS Relative Position

The relative position is used to change the default position of an HTML element. After setting position as relative now you can set that element at a particular position. This HTML element will relative to its parent element.

  • Set any value for a position like left, right, top, and bottom.
  • The value of the top, bottom, left, and right can be either positive or negative, for example:
  • The position-left is (-22px) means towords the right to left side (22px).
    • Move left using negative value of position left.
    • Move right using positive value of position left.
  • The position-top is (-23px) means towords the left to right side (23px).
    • Move up using negative value of position top.
    • Move down using positive value of position top.

Example of Relative Position


Hello! This is a div element. Now, we are going to set the position as relative.
This is another div with height 100px

CSS Fixed Position

The CSS fixed position used to fixed any HTML element to the positioned relative of the viewport and it will be not scrolled during the page scroll, You can use Top, Bottom, Left, and right position properties to point the element at a particular place.

Example of Fixed Position

CSS Absolute Position

The absolute position is just like a fixed position; the Only difference is positioned relative to the nearest positioned element. If there is no nearest positioned element then it positioned to viewport relative. While in case of a fixed position it is always positioned to viewport relative.

The viewport is the whole area of your computer device screen where you can see the web page to perform.

Example of Absolute Position

CSS Sticky Position

The CSS sticky position used to set the position of an element with the user's scroll. The sticky position have to set the values like Top, Bottom, Left, and Right.

Nowadays, the position sticky used in the head section to stop the menu at the top while page scrolling.

Example of Sticky Position

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

© 2023 GDATAMART.COM (All Rights Reserved)