More “Try it Yourself” examples below.
Definition and Usage
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
| Default value: | static |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.position=”absolute”Try it |
CSS Syntax
position: static|absolute|fixed|relative|sticky|initial|inherit;
Property Values
| Value | Description |
|---|---|
| static | Default value. Elements render in order, as they appear in the document flow |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element |
| fixed | The element is positioned relative to the browser window |
| relative | The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position |
| sticky | The element is positioned based on the user’s scroll positionA sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix. |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
