What does this property do?
It determines how an element is positioned in the document.
Some Clarifications
- offset properties refers to top/right/bottom/left properties
- an element's natural position / where an element would naturally be refers to the element without position property defined on it
- positioned element refers to an element with display set to anything other than static
All CSS Position Values
- position:static; (default)
- position:relative;
- position:absolute;
- position:fixed;
- position:sticky;
static
- The default value.
- Cannot use offset properties.
relative
- Allows use of offset properties.
- The offset properties are based on where the element would naturally be.
- The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.
absolute
- Allows use of offset properties.
- The offset properties are based on the closest non-static ancestor or the initial viewport. This means that if the body is scrollable the absolute element will not move with the viewport.
- Elements around it will treat it as if it doesn't exit.
fixed
- Allows use of offset properties.
- The offset properties are based on the viewport(not the initial viewport) or if any ancestor has transform, perspective or filter set to anything other than none.
- Elements around it will treat it as if it doesn't exit.
sticky
- Allows use of offset properties.
- The offset properties are based on nearest ancestor with overflow set to anything other than visible. If it cannot find one, it uses
<html>or<body>, check usingdocument.scrollingElement. Another way to think of offset values is it is the minimum gap between the element and the edge of the viewport while the container is in-frame. - The element is also constrained by its closest block level ancestor. i.e. it cannot leave that ancestor.
- The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.
Summary
- Positioned elements all allow the use of offset properties.
- Elements around static, relative, sticky elements will treat them as if they are still in their natural positions.
- Elements around absolute and fixed elements will treat them as if they don't exist.
Top comments (4)
Wow, I have struggled a lot to understand this CSS positions thanks for your efforts to explaining all this :)
You're welcome!
Thanks for the encouragement!