The position property in CSS helps us in positioning the method of the element. The positioning of Element means how we want the element to present on the page i.e. Static, fixed, absolute, relative or sticky. So, we can see there are 5 positioning properties with respect to which we can place elements in the left, right, bottom, top, and center. To make it simple, let specify these points in bullets:

The Position Property

  • Static

  • Fixed

  • Relative

  • Absolute

  • Sticky

*The Elements could not be placed Right, Left, Top, and Bottom, until and unless the position property is set first.

 CSS Position: Static

By default, the HTML elements are positioned statically. The elements are which are positioned static are not affected by the top, bottom, left and right properties. The element when subjected to the static position property, always positioned according to the flow of the page.

With the help of the following example, Let’s see how we can use static property:

coding for using element in static property in css

Web Window for CSS Position: Static

*While implementing the position property, we use “position: static” format under <style> section.

CSS Position:Fixed

As the name suggests, the fixed position will allow the element to fix at a place, even when the page is scrolled up or down. Let’s understand this with the help of an example:

CSS Position: Fixed (HTML Code)

CSS position: fixed (browser window)

 CSS Position: Relative

The relative position property is used to place the element relative to its normal position. If we use left, right, bottom and top property, then the element will adjust itself according to these properties.

Let”s understand this with the help of an example:

Html code for Relative property in css

Css Position: Relative (web window)

In the above example, look in the output window, the border of the text is running continuously and is not closed at the end. Though it adjusted itself relative to the left position.

CSS Position: Absolute

In absolute position property, the element is placed relative to the property used before it i.e. fixed property element, static property element, etc. If no property is used before the absolute position property, it changes its position in relative to the document body and changes its position with the scrolling of the page. In simple words, it has all the positions except static position.

How to align element in absolute position

web view of absolute property

CSS Position: Sticky

Have you ever been to a website where the top bar remains there even if you scroll the page down. This property is known as the sticky property. Sticky position basically falls between “Relative” and “Fixed” property, depends upon the scrolling option.

How to make an element stick on the webpage

stick property output in browser

If you want to learn how to use Icons in CSS, read this post. Also, if you are confused about how to use colors in CSS, read this post.

If you want to learn more about CSS, click here.


Leave a Reply

Your email address will not be published. Required fields are marked *