Article On CSS Position
CSS Positioning Explained By Me How It's Important & How It's Work
Table of contents
No headings in the article.
CSS Positioning
In CSS, we set the location of an element by using the position property.
For example:
.element {
position: relative;
top: 10px;
}
Our elements’ position will be moved down 10px from the top, relative to its original position in the document.
The position property can have one of 5 values:
- static
- relative
- absolute
- fixed
- sticky
Let’s take a look at each!
- Static
Every element has a static position by default. Static positioned elements are displayed in the normal page flow.
Let’s use the following HTML as an example:
<div class="parent">
<p>parent</p>
<div class="child">
<p>child</p>
<div class="element">
<p>element</p>
</div>
</div>
</div>
And some basic CSS:
* {
font-family: monospace;
text-align: center;
font-size: 24px;
}
.parent {
background-color: pink;
padding: 40px;
width: 500px;
border: 2px solid #000;
}
.child {
background-color: green;
padding: 30px;
border: 2px solid #000;
}
.element {
background-color: yellow;
padding: 30px;
border: 2px solid #000;
}
This gives us the following:
- - Relative
An element with a relative position will also remain in the document flow, only now top, bottom, left & right will work!
These properties (known as “offset” properties) move element from the original position in the specified direction.
They accept any length value or a percentage.
Let’s add position: relative& left with an offset value of 100px to our element:
.element {
/* other styles ... */
position: relative;
left: 100px;
}
Position Relative
Our element will move 100px from the left, relative to its container.
We could also set multiple values:
.element {
/* other styles ... */
position: relative;
top: -200px;
left: 100px;
}
- Absolute
When the absolute position is set on an element, its completely removed from the document flow. Meaning all other page elements will behave as if it no longer exists.
Lets give our element a position: absolute, we can see that its original space has now collapsed, as the element exists outside of the document flow.
.element {
/* other styles ... */
position: absolute;
}
Position Absolute
We can use positional properties with an absolute element. So we can move it around using top, right, bottom, or left:
.element {
/* other styles ... */
position: absolute;
top: 0px;
left: 0px;
}
Position Absolute Top Corner
It’ll position itself at the 0,0 coordinates of the browser window (the top-left corner).
Or:
.element {
/* other styles ... */
position: absolute;
top: 250px;
left: 100px;
}
Position Absolute Offset
Our offset properties always set the position relative to the closest container that is not static.
If all parent containers are static, it’ll sit relative to the window.
But if we add position: relative to the .child element, and set the top and left to 0, the element will be positioned at the 0, 0 coordinates of .child :
.child {
/* other styles ... */
position: relative;
}
.element {
/* other styles ... */
position: absolute;
top: 0px;
left: 0px;
}
- Fixed
An element with a fixed value is similar to absolute in that it’s also removed from the flow of the document.
A fixed positioned element is always relative to the window itself, not any particular parent container:
.element {
/* other styles ... */
position: fixed;
top: 0;
left: 0;
}
- Sticky
The sticky value is a hybrid of the relative and fixed values. It’s treated like a relative value until the scroll location (of the viewport) hits a specified threshold. At that point it “sticks” in place, acting like a fixed element.
You might want a landing image with a navigation menu located underneath. As you scroll down past the landing image, you could have the menu then “stick” to the top of the window.
For example:
.element {
position: sticky;
top: 0;
}
Our element will be relatively positioned until the scroll location of the viewport reaches it. Then it’ll stick to the page in a fixed position at the top (0) of the screen.
At this stage, sticky remains an experimental value, with only partial adoption by the major browsers: