CSS <position> Data Type

Description

The CSS <position> type is used to define the positioning behavior of an HTML element within its containing element. It specifies how an element should be placed relative to its normal position in the document flow or relative to another element.

There are several values that can be assigned to the <position> property, including:

  1. static (default): This is the default position value for most HTML elements. Elements with position: static are positioned according to the normal flow of the document. They cannot be moved using the top, bottom, left, or right properties.

  2. relative: When an element is set to position: relative, it remains in the normal flow of the document but can be shifted from its original position using the top, bottom, left, or right properties. Other elements in the document flow will still occupy the space originally reserved for the element.

  3. absolute: Elements with position: absolute are taken out of the normal flow of the document and positioned relative to their nearest positioned ancestor (an ancestor with a position value other than static). These elements can be moved using top, bottom, left, or right properties and can overlap other elements.

  4. fixed: Elements with position: fixed are removed from the normal flow and are positioned relative to the viewport (the browser window). They do not move when the page is scrolled and are commonly used for creating elements like sticky headers or footers.

  5. sticky: Elements with position: sticky are initially in the normal flow but behave like position: relative until they reach a specified scroll position. At that point, they become "stuck" and remain fixed in place until the user scrolls past a certain point.

Understanding and using the <position> property is crucial for creating complex layouts and controlling the placement of elements on a web page. It provides flexibility and control over how elements are positioned within the document's structure.

Syntax

<position> = [
  [ left | center | right ] || [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]?
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

Values

  • leftIs equivalent to a horizontal position of 0%.
  • rightIs equivalent to a horizontal position of 100%.
  • topIs equivalent to a vertical position of 0%.
  • bottomIs equivalent to a vertical position of 100%.
  • centerIs equivalent to position of 50% in the applicable direction.

Example

<p>Example of the position CSS data type</p>
body {
    height:100%;
    background-color:#222;
    background-image:
       radial-gradient(circle at center, red, indigo 3em),
       radial-gradient(circle farthest-side at top right, yellow, green 90%, blue),
       radial-gradient(ellipse at left 50%, yellow, orange 30%);
    background-size:15em 10em, 30% 70%, 100px 70px;
    background-position: center left, center calc(100% - 1em), 100% 50%;
    background-repeat:no-repeat no-repeat, no-repeat no-repeat, no-repeat no-repeat;
}
p {
   color: white;
}

Browser Support

The following table will show you the current browser support for the CSS position data type.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 7th October 2023