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!
Values
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: red;
padding: 40px;
width: 500px;
border: 2px solid #000;
}
.child {
background-color: blue;
padding: 30px;
border: 2px solid #000;
}
.element {
background-color: green;
padding: 30px;
border: 2px solid #000;
}
This gives us the following:
We have our default static
layout. The static
position doesn’t need to be set as its assumed.
If we attempted to apply properties such top
, bottom
, left
or right
to a static element, there would be no effect.
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;
}
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;
}
The negative value for top
moves box move up relative to its container.
You’ll also notice the space previously occupied by the element
box still remains. As its position is offset relative to its original position.
We can also apply z-index to relatively positioned elements!
Absolute
When the absolute
position is set on an element, it's completely removed from the document flow. Meaning all other page elements will behave as if it no longer exists.
Let's 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;
}
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;
}
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;
}
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;
}
This is a great trick to remember when positioning elements on a page!
You can also use z-index
placement with absolute positioning.
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;
}
Also, fixed
elements are not affected by scrolling. Meaning its position will stay the same even when the page is scrolled.
For example, you might use the fixed
element to place a “scroll to top” icon at the bottom-right side of the page!
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.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)