The position
property can help you manipulate the location of an element, for example:
.element { position: relative; top: 20px;}
Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just how much control this gives us (although this isn’t a good idea for performance reasons):
relative
is only one of six values for the position
property. Here are the others:
Values
static
: every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.relative
: an element’s original position remains in the flow of the document, just like thestatic
value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.absolute
: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.fixed
: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.sticky
: the element is treated like arelative
value until the scroll location of the viewport reaches a specified threshold, at which point the element takes afixed
position where it is told to stick.inherit
: theposition
value doesn’t cascade, so this can be used to specifically force it to, andinherit
the positioning value from its parent.
Absolute
If a child element has an absolute
value then the parent element will behave as if the child isn’t there at all:
.element { position: absolute;}
And when we try to set other values such as left
, bottom
, and right
we’ll find that the child element is responding not to the dimensions of its parent, but the document:
.element { position: absolute; left: 0; right: 0; bottom: 0;}
To make the child element positioned absolutely from its parent element we need to set this on the parent element itself:
.parent { position: relative;}
Now properties such as left
, right
, bottom
and top
will refer to the parent element, so that if we make the child element transparent we can see it sitting right at the bottom of the parent:
Learn more about position: relative
and position: absolute
at DigitalOcean.
Fixed
The fixed
value is similar to absolute
as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling. See the child element in the demo below and how, once you scroll, it continues to stick to the bottom of the page:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2 | 7 | 12 | 3.1 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
124 | 125 | 3 | 8 |
Sticky
The sticky
value is like a compromise between the relative
and fixed
values. As of this writing, it is currently an experimental value, meaning it is not part of the official spec and only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.
What does it do? Well, it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed
value.
Take the following example:
.element { position: sticky; top: 50px;}
The element will be relatively positioned until the scroll location of the viewport reaches a point where the element will be 50px
from the top of the viewport. At that point, the element becomes sticky and remains at a fixed
position 50px
top of the screen.
The following demo illustrates that point, where the top navigation is default relative
positioning and the second navigation is set to sticky
at the very top of the viewport. Please note that the demo will only work in Chrome, Safari and Opera at the time of this writing.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
91 | 59 | No | 91 | 7.1* |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
124 | 125 | 124 | 8* |
Learn more about position: sticky
at DigitalOcean.
More Information
#110: Quick Overview of CSS Position Values
position
Chris Coyier
Absolute Positioning Inside Relative Positioning
position
Chris Coyier
Absolute, Relative, Fixed Positioning: How Do They Differ?
position
Chris Coyier
Creating sliding effects using sticky positioning
position
Preethi
Dealing with overflow and position: sticky;
position
Chris Coyier
Getting Fancy with position: sticky;
position
Chris Coyier
How to Use CSS Grid for Sticky Headers and Footers
position
Adam Rackis
Sticky Footer, Five Ways
position
Chris Coyier
Position Sticky and Table Headers
position
Chris Coyier
position: sticky;
position
Chris Coyier
More Like position: tricky;
position
Chris Coyier
What if there was no position: static;?
position
Chris Coyier