Floating or anchored?
position
This property determines whether an element uses its parent's flow-of-text algorithm to control its position.
Property values
Each element has two properties which determine its placement in the document: the top and left values. Exactly how to use those two values to arrive at the element's actual place in the document is determined by the position property.
Each element also has bottom and right properties — which are directly connected to its height and width — and these four values are used in the flow-of-text algorithm as well.
These are the keywords that can be used, together with a description of how they change the interpretation of top, left, bottom and right.
| keyword | obeys parent's flow? | uses top, left, bottom, right | interpretation of top, left, bottom, right |
|---|---|---|---|
| static | yes | no | This element is placed within the parent's boundaries, in the first available space that will fit its width and height, immediately after all of its prior siblings are laid out using their top, left, bottom and right values. |
| relative | yes | yes | This element initially uses the static rules to determine its proper position, but then shifts that position by the amounts specified in top, left, bottom and right. Positive values shift it inside the container. Negative values shift it outside the container. |
| fixed | no | yes | This element interprets its top, left, bottom and right properties to be offsets from the browser's top/left and bottom/right corners. Specify either top or bottom, not both, and specify either left or right, not both. |
| absolute | no | yes | This element interprets its top, left, bottom and right properties to be offsets from its ancestor's top/left and bottom/right corners, but only if that ancestor has a position that is relative, fixed or absolute. |
| sticky | yes/no | yes | This element is initially relative, and therefore scrolls with its parent's content. It switches to fixed when the value of top is reached, keeping it visible and above of the scrolled content. |
Examples
/* shift the element 2rem to the right of its normal flow-of-text position */
position: relative;
left: 2rem;
/* position the element 2rem away from the browser's left edge */
position: fixed;
left: 2rem;
/* position the element 2rem inside its ancestor's left edge */
position: absolute;
left: 2rem;