CSS (or Cascading Style Sheets) is a style sheet that adds style to a document written in a markup language, such as HTML. Understanding how CSS influences on-page alignment can help you enhance your design abilities as well as the overall user experience of your webpage.

In this article, we will discuss what is position property in CSS and how it works to improve the site’s User Interface.

What is CSS Position Property?

The CSS position property specifies the location of an element in an HTML document. The final position of an element is determined by the top, right, bottom, and left properties.

These properties set the position of an element according to the value of the position property. The position property in CSS takes the following values:

• Static
• Relative
• Absolute
• Fixed
• Sticky

Position: Static

It is the default positioning of every HTML element. It adjusts the position in accordance with the natural flow of the page. It is unaffected by the top, bottom, left, and right properties.

position: static;

Position: Relative

In relative positioning, the element follows the natural flow of the page but is positioned relative to its initial position. The shift in the final position of the element is governed by the value of offsets. The offset values are set using top, right, bottom, and left properties.

The content around this element adjusts for extra spacing that occurs due to its relative positioning.

position: relative;

Position: Fixed

In fixed positioning, the element leaves from the natural flow of the page. Instead, it is positioned relative to the screen’s viewport. The position of a fixed element is adjusted using top, right, bottom, and left properties.

A fixed element is rigid in terms of location, meaning it does not move regardless of how the page is scrolled up and down.

Unlike relative positioning, there is no space left where the element would have been located in the page layout.

position: fixed;

Position: Absolute

In absolute positioning, the element ignores the regular document flow, but unlike fixed positioning, the element is positioned relative to the nearest positioned ancestor.

A positioned element has property value relative, fixed, absolute, or sticky.

If the element has no positioned ancestor, the element is positioned relative to its containing block and moves with scrolling.

position: absolute

Position: sticky

Sticky positioning is a combination of relative positioning and fixed positioning.

A sticky element toggles between relative and fixed, depending on the position of the scroll. It is relative until an offset position is met in the viewport.

position: sticky;

Z-index

While placing our elements on a webpage, sometimes there are cases where elements overlap. By default, the newer element will appear on top, which may cause disturbance to our design.

In those cases, we can use the z-index property to specify which element should be on top of the others. In other words, the z-index specifies the stacking order of the overlapping elements. For instance to make an object stacked over the document use:

z-index: 1;

Z-index can have both positive or negative stack values. A higher stack order element will appear in front of a lower stack order element.

Fixed, absolute, and sticky positioning are stacked by default. All position values except static can be stacked.