CSS Positioning Elements

The HTML elements on a webpage are displayed where we place them, but with the CSS “position” property we can move them around. By default the position property of an element is “static”, but we can assign other values to it.

The CSS position properties

The value of the position property can be:

• static
• absolute
• relative
• fixed
• sticky

Once we set a positioning value, then we can use the top, bottom, left, and right properties to move the element about. It’s important to remember that first we must set the position proprty before we use these properties. They also work differently with the different position values.

Let’s see the position properties one by one.

position: static

As previously mentioned, “static” is the default value. On this value there is no effect by the top, bottom, left, and right properties, and is positioned according to the normal flow of the document.

Example:

<div class="first-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

<div class="second-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

and the css

.first-div {
background-color: blue;
color: white;
margin: 40px;
position: static;
}

.second-div {
background-color: orange;
color: white;
margin: 40px;
}

position: absolute

When an element is positioned absolutely, it is removed from the normal flow of the document. Then we are free to move this element about with the top, bottom, left, and right properties. An absolute positioned element is positioned relative to its closest positioned ancestor. If there isn’t any, then it is placed relative to the initial containing block. The freed space of this element will be filled up with other element if it is capable.

So, in the following example we move the div with the class of “first-div” by 60px down from the document start and 30px from the left.

.first-div {
background-color: blue;
color: white;
margin: 40px;
position: absolute;
top: 60px;
left: 30px;
}

With position: absolute we can achieve some really nice overlapping effects.

position: relative

When setting an element position to relative then it will be positioned relative to its place in the regular document flow.

.first-div {
background-color: blue;
color: white;
margin: 40px;
position: relative;
top: 60px;
left: 30px;
}

Position relative and absolute are often used together to place an element onto another. For example, let’s say we want to display the image of a blog post and place a category name badge on the top left corner of the image.

We would have the following HTML:

<div class="image">
<img src="https://cdn.pixabay.com/photo/2022/04/19/09/08/flowers-7142409__480.jpg">
<span class="category">Nature</span>
</div>

and the css

.image {
position: relative;
}

.category {
position: absolute;
background-color: green;
color: white;
padding: 5px 15px;
top: 10px;
left: 10px;
}

So we position the span element realtive to the image. That’s why we set the image’s position to relative and the category to position. We take out the span element from the normal flow of the document and position it to the top left corner of the image.

position: fixed

When we use position: fixed, we position an element relative to the viewport or the HTML element. When we scroll the window, the element will remain exactly where we placed it. Scrolling will not affect them. Try changing the value of position to fixed for the previous code.

This is often used with fixed navigation menus. When we scroll the navigation bar always remain on the top.

position: sticky

This value is a combination of “relative” and “fixed”. At first the element behaves like a relatively positioned element, then after a certain scroll position it changes to fixed.

This option is also often used with navigation bars.