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
*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:
*While implementing the position property, we use “position: static” format under <style> section.
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: 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:
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.
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.
If you want to learn more about CSS, click here.