Understanding the CSS ‘position’ property
Today we’re going to look at the css position property and learn the difference between: static, relative, absolute, fixed, and sticky positioning.
Terminology
First, let’s familiarize ourselves with some words and concepts used in this article.
- Taken out of the normal flow — If an element is taken out of the normal flow of the document, then no space is created for the element in the page layout, and other elements will position themselves as if the element did not exist.
- Positioned element — A positioned element. For example, a positioned ancestor is an element whose
positionvalue is anything exceptstatic— the initial value. In other words, the value is eitherrelative,absolute,fixed, orsticky. - Containing block — A containing block is the content-area of an element’s nearest block-level ancestor (a parent element that is not an inline element).
Cheat Sheet
I like creating cheat sheets and documenting quick facts to reference when learning new things about CSS because then I can look back at my notes real quickly and get valuable information when I have forgotten something.
Examining each of the 5 position property values
Now, let’s take a look at how each of the 5 values: static, relative, absolute, fixed, and sticky can change an item’s position on a webpage.
Static
static is the initial value. The top, right, bottom, and left properties have no effect when an element’s position is static.
It’s very unlikely that you will have to do something like position: static in a CSS file, but it’s important to know that by default the offset properties (top, right, bottom, and left) will not work and will have no effect on an element’s position.
Relative
relative keeps the element in the normal flow of document and positions the element relative to itself. The element is then offsets based on the values of top, right, bottom, and left.
When you use position: relative on an element you’re telling the element to take up its normal space in the document (the element is still part of the normal document flow), but you also have the ability to offset it’s location.
Example using ‘relative’ positioning:
We have defined three boxes, but only one of the boxes has the box-relative class name and is being positioned relative. Notice that the red box does not shift the positioning of the blue boxes. In other words, offsetting a relative element does not effect the position of other elements on the page.
Absolute
absolute takes an element out of the normal flow of document and positions the element relative to its nearest positioned ancestor.
Example using ‘absolute’ positioning:
We have defined three boxes, the black box is positioned absolute and the blue box is positioned relative.
Notice that the black box is not positioned relative to the red box, even though the red box is the first ancestor of the black box.
Why? Because the red box is not a positioned element. Remember, if we don’t specify a value for the position property then the value is the same as position: static.
Fixed
fixed is very similar to absolute except that fixed positions the element relative to the viewport. There are exceptions to this rule: when one of the element’s ancestors has a transform, perspective, or filter property set to something other than none, then that ancestor behaves as the containing block instead of the viewport.
When you use position: fixed you’re telling the browser that you do not want the element’s position to move when scrolled. This can be useful when displaying full-screen notifications.
Sticky
sticky can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
Sticky positioning is really unique! A sticky element will just sit there like a relative element, but as you scroll past it, if its parent element has room (usually: extra height) the sticky element will behave as if it’s fixed until that parent element is out of room.
Essentially, when you use position: sticky you’re telling the browser that the element can behave like a fixed element within a threshold boundary, but the once the element crosses that threshold, then the element is no longer considered fixed instead it is relative.
Additional Resources
Resources I used to learn about the CSS position property:
