CSS <position> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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:

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

HTML

<p>Example of the position CSS data type</p>

CSS

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;
}

Result

Editor