CSS Positioning
📣 Sponsor
Elements in CSS are positioned by default according to their order in the HTML document you are targeting. However, this is not always the way you want items to be displayed.
Fortunately, CSS has a property known as position
which lets us move objects around. Positions are described as:
relative
- we are positioning the object relative to its original position.absolute
- we are positioning the object relative to its nearest relatively positioned parent.fixed
- we are positioning the object relative to the viewport. That means the object 'sticks' to the page.static
- the default value. This means an object cannot be moved.
Positioning Rules
An object can have its position altered using the top
, right
, bottom
or left
keywords. For example, with position relative, we may write this:
div {
position: relative;
top: 20px;
left: 5px;
}
As you might imagine, this will move all div
s 20px from the top, and 5px to the left. As expected, we can also move it from the right, or bottom:
div {
position: relative;
bottom: 15px;
right: 2px;
}
Absolute Positioning
If relative
moves an object relative to its original position, then absolute
positions it based on the closest parent which has a relative position. If none are found, it will position it based on the edge of the page.
An example is shown below. The absolute div
is moved from the top left corner of the parent relative div
.
.absolute-div {
position: absolute;
top: 80px;
left: 70px;
}
Interesting Behaviours
So what happens if we use both left and right, or top and bottom together, with an absolute div, for example? Well, in the below example, the left value will be 5px, and the right is 5px.
Assuming the div
doesn't have a width, the div will change width so that it is both 5px from the left, and 5px from the right.
.absolute-div {
position: absolute;
top: 80px;
left: 70px;
}
Fixed Positioning
The final (and quite useful) positioning property we will cover is fixed
. This is often used for fixed headers which are always stuck to the top of the page.
Let's take a look at an example:
.fixed-div {
position: absolute;
top: 80px;
left: 70px;
}
Z-index
Since we are talking about positioning, let's talk about z-index
which refers to the order along the z axis. Usually, HTML items further down the HTML document are on top, but with z-index
we can alter that. A higher z-index
, means the element is more 'on top'. Take a look at this example:
<div class="container">
<div class="item-1"></div>
<div class="item-2"></div>
</div>
.container {
/* Contains the absolute items */
position: relative;
}
.item-1, .item-2 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.item-1 {
background: red;
top: 20px;
left: 20px;
}
.item-2 {
background: blue;
}
As you can see, item 2 is on top, as we thought it would be. By default, all items have a z-index
of 0, but what if we add a higher z-index
to item-1
?
.item-1 {
z-index: 1;
}
Now item-1
is higher, which let's us control the order of elements on top of each other on the page.
CSS Sticky Positioning
CSS has another positioning value, called sticky
. Sticky works a little like fixed, but it is contained by its parent and will not scroll until you scroll past it.
We have a dedicated article on the CSS sticky property, which you can find here.