The CSS position
property is used to manipulate or adjust the position of an element in the document. It is also useful in specifying the type of position to be used for an element.
Jump ahead:
Demo
See the Pen
CSS Position Example by Solomon Eseme (@kaperskyguru)
on CodePen.
Values
There are five main positions or values that can be supplied to the position
property. We explore each in detail below.
static
static
is the default value of the CSS position
property. It fixes the element in the normal flow of the document; even if top
, bottom
, left
, and right
values are supplied, they will not have any effect on statically positioned elements.
div { border: 2px solid red; position: static; }
This will cause the div
tag to remain in the same position as normal.
relative
Like static
, setting an element’s position to relative
will cause the element to retain its position in the document. However, properties such as top
, bottom
, left
, and right
will have an effect on the element and can be used to move the element’s position within the document.
div { border: 2px solid red; position: relative top: 20% bottom: 0 right: 0 left: 20% }
This will cause the div
element to move 20 percent from the top and 20 percent from the left. It is also important to note that the values given to the top
, bottom
, left
, and right
properties do not affect any other element.
absolute
An absolutely positioned element will have its position
set to absolute
. The element will be removed from the normal flow of the document, and other elements will fill up the space created, behaving as though the absolutely positioned element is not there.
The absolutely positioned element can also be controlled by using the top
, bottom
, left
, and right
properties, just like elements positioned with the relative
value.
It is also important to note the absolutely positioned elements are affected by scrolling.
div { border: 2px solid red; position: absolute top: 30% bottom: 0 right: 0 left: 40% }
fixed
A fixed
element behaves exactly like an absolutely positioned element: it removes the element from the normal flow of the document, and its position can be affected by using top
, bottom
, left
, and right
.
The difference is that a fixed
element is not affected by scrolling because it is relative to the viewport instead of its closest positioned ancestor, as with the absolutely positioned element.
div { border: 2px solid red; position: fixed top: 50% bottom: 0 right: 0 left: 10% }
sticky
A sticky
positioned element behaves like a relatively positioned element while scrolling until it reaches a declared threshold, at which point it will behave like a fixed
element; the element will stick to that point.
div { border: 2px solid red; position: sticky; top: 50% }
In the above example, the div
element will keep scrolling until it reaches 50 percent of the viewport, at which point it will stop scrolling and stick, fixed, to that point.
Is your frontend hogging your users' CPU?
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.