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.
Learn more →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.
https://logrocket.com/signup/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.
