CSS position Property

❮ Previous Reference Next ❯

Example

p {
  position: absolute;
  left: 100px;
  top: 400px;
  right: 100px;
  border: 1px solid black;
}
Try this code ❯

Meaning

The position property defines how an element is positioned relative to other elements.

The top, right, bottom, and left properties determine the final location of positioned elements.

Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.

Default value:static
Inherited:No
Animatable:No
Version:CSS2
JavaScript syntax:
object.style.position="static|absolute|fixed|relative|sticky|initial|inherit|revert|revert-layer|unset";


Standard Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
static Specifies the element is positioned according to the normal flow of the document.
absolute Specifies the element is removed from the normal document flow, and no space is created for the element in the page layout.
fixed Specifies the element is removed from the normal document flow, and no space is created for the element in the page layout.
relative Specifies the element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
sticky Specifies the element is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  position: static;
}
❮ Previous Reference Next ❯