What is CSS Position property?

CSS position is a property that is used to specify how an HTML element should be positioned on a web page. The position property has several values, including static, relative, absolute, fixed, and sticky, which determine how the element is positioned. The default value of the position property is "static", which means that the element is positioned according to the normal flow of the page.

There are 5 values of the CSS Position Property:

1. Static

2. Relative

3. Absolute

4. Fixed

5. Sticky

Using the position property, you can create complex layouts and designs that require precise positioning of elements on the page.

Static

The "static" is the default position value for all elements on a web page. When an element is set to static positioning, it means that it is positioned according to the normal flow of the document, and the top, bottom, left, and right properties do not have any effect. The static position value is the least flexible of all the CSS position values, and it is primarily used for defining the default position of elements on a web page. By default, all block-level elements are positioned in a vertical flow, and inline elements are positioned horizontally within a line.

To set an element to the static position in CSS, you can simply use the "position: static" property. Here's an example:

<div style="position: static;">This is a static positioned element.</div>

In the above example, the div element is set to the static position value using inline CSS. You can also set the position property in a separate CSS stylesheet using the following syntax:

.element {
  position: static;
}

In the above example, the class .element is assigned to the static position value in a separate CSS stylesheet. This will apply the static positioning to any element that has the class "element" assigned to it.

Remember that using the static position value is often the default positioning for elements, so it may not be necessary to explicitly set an element to this position value unless you are overriding other position values that have been set.

Relative

The "relative" is a position value that is used to position an element relative to its normal position in the document. When an element is set to relative positioning, it is positioned according to its original position, and you can use the top, bottom, left, and right properties to move the element in any direction relative to its normal position.

Here's an example of how you can use the "relative" position value:

<div style="position: relative; top: 20px; left: 10px;">This is a relatively positioned element.</div>

In the above example, the div element is set to relative position value and is moved 20 pixels down from its original position and 10 pixels to the right. The space that the element would have occupied in its original position is still reserved.

You can also set the position property to "relative" in a separate CSS stylesheet using the following syntax:

.element {
  position: relative;
  top: 20px;
  left: 10px;
}

In the above example, the class .element is assigned to the relative position value, and the top and left properties are used to move the element from its original position. This will apply the relative positioning and movement to any element that has the class "element" assigned to it.

Absolute

The "absolute" is a position value that allows you to position an element relative to its closest positioned ancestor element, or to the document body if no positioned ancestor exists.

When an element is set to absolute positioning, it is taken out of the normal document flow, and the top, bottom, left, and right properties can be used to position it precisely about its nearest positioned ancestor. If there is no positioned ancestor element, the absolute-positioned element will be positioned relative to the document body.

Here's an example of how you can use absolute positioning in CSS:

<div style="position: relative;">
  <div style="position: absolute; top: 50px; left: 100px;">This is an absolute positioned element.</div>
</div>

In the above example, the inner div element is set to "absolute" positioning and the top and left properties are used to position it 50 pixels down from the top and 100 pixels from the left of its closest positioned ancestor element, which is the outer div element with "relative" positioning. If there was no outer div element with "relative" positioning, the absolute-positioned element would be positioned relative to the document body.

Absolute positioning is often used for creating layout designs with precise positioning of elements on a web page, such as with navigation menus, tooltips, or pop-ups.

Fixed

The "fixed" position value is used to position an element relative to the viewport, which means that the element remains in the same position even when the page is scrolled. This position value is often used to create elements that need to stay in a fixed position, such as a navigation bar or header.

When an element is set to fixed positioning, it is positioned relative to the viewport rather than its nearest positioned ancestor. The top, bottom, left, and right properties can then be used to position the element precisely on the screen.

Here's an example of how to set an element to the fixed position value:

<div style="position: fixed; top: 0; left: 0;">This is a fixed positioned element.</div>

In the above example, the div element is set to the fixed position value using inline CSS. The top and left properties are also set to 0, which will position the element in the top-left corner of the viewport.

You can also set the fixed position value in a separate CSS stylesheet using the following syntax:

.element {
  position: fixed;
  top: 0;
  left: 0;
}

In the above example, the class .element is assigned to the fixed position value in a separate CSS stylesheet, and the top and left properties are also set to 0. This will apply the fixed positioning to any element that has the class "element" assigned to it.

Sticky

The "sticky" is a position value that is used to create elements that "stick" to a specific position on a web page as the user scrolls. The "sticky" position value is a combination of both "fixed" and "relative" position values, and it allows an element to switch between being "static" and "fixed" depending on the user's scroll position.

When an element is set to the "sticky" position value, it is positioned according to the normal flow of the document until it reaches a specified scroll position. At this point, the element becomes "fixed" and is positioned relative to the viewport, allowing it to remain in the same position as the user scrolls.

Here's an example of how to use the "sticky" position value:

<div style="position: sticky; top: 0;"> This is a sticky element. </div>

In the above example, the div element is set to the "sticky" position value and has a "top" value of 0, which means that it will stick to the top of the viewport once it reaches the top of the parent element. You can also use the "bottom", "left", and "right" properties to specify the position of the sticky element.

Thanks for reading!

If you found this article helpful, please like and share it, Thank you😊

You can connect with me on Linkedin.