The position property specifies the type of positioning method used for an element. It can be static, relative, fixed, absolute or sticky.

There are five different position values:

  1. static
  2. relative
  3. fixed
  4. absolute
  5. sticky

1. position: static;

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.

2. position: relative;

The element is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on its positioning at all. However, if you give it some other positioning attribute, for example, top: 20px;, it will shift its position 20 pixels down from where it would normally be.

3. position: fixed;

The element is positioned relative to the viewport. It means that the element always stays at the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

4. position: absolute;

The element is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

5. position: sticky;

The element is positioned based on the user's scroll position. It is positioned relative until a given offset position is met in the viewport and then it "sticks" in place (like position:fixed).

Overlapping Elements

When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element - which element should be placed in front of, or behind, the others. An element can have a positive or negative stack order.

An element with greater stack order is always in front of an element with a lower stack order. If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.