CSS Position Property

CSS Position Property

A web page (also referred to as the document) is displayed within a browser window's viewport. Everything that you can present to the viewer is displayed in that area, although the document will require scrolling if it is larger than the viewport.

Browser width and height refers to the dimensions of the entire window, including any browser controls and other interface items. Viewport is the area of the display area. All fixed-position elements will be placed in relation to the viewport edges. Viewport width and height refers to the live display area of the browser window’s viewport. The live dimensions are always less than the full window dimensions.

Document width and height refers to the overall dimensions of the web page contained within the body tag. If the document’s width or height are larger than the viewport width or height, you see scroll bars that let you view the rest of the document.

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. Static elements flow into a document one after the next. A static element cannot be explicitly positioned or re-positioned, cannot be clipped, and cannot have its visibility changed.

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. A relatively positioned element will be offset based on its position in the normal flow of the document. However, the space it occupied will remain but appear empty.

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. This allows you to establish constant elements in the screen that do not scroll with the rest of the content.

4. position: absolute;

Absolute positioning takes an element out of the normal flow of the document, leaving no space behind. An element that is defined in this way is placed at an exact point in the window by means of x and y coordinates relative to its most recently positioned parent element’s edges or the body if none of its parents are positioned.

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).

Setting an Element's Position

All positioned elements can have a top value, a right value, a bottom value, and a left value to position the element from those four sides. A relative element will be offset relative to its own edges. An absolute element will be offset relative to its parent’s edges. A fixed element will be offset relative to the viewport’s edges. You can use negative values to move the content up and to the left instead of down and to the right.

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.