A beginner's guide to CSS position properties.

A beginner’s guide on how the CSS position property works and how to use them effectively in developing a standard and responsive website.

Table Of Content

Introduction
Overview of CSS position properties
Values
Conclusion

Prerequisite

A fundamental knowledge of HTML and CSS is expected to fully grasp this guide. If you're not already familiar with these technologies, consider taking some time to acquire the basic knowledge of HTML and CSS before proceeding further. You can hop on to W3Schools to learn some of the fundamentals of HTML and CSS.

Introduction

A structured layout eases the interaction of the end users on the website. The goal of every developer or designer is to create a website, where its layout is fluid and responsive without any overlapping of the text, image, or object.

The position property is the best approach to the problem of text or image overlapping, it comes with 5 different values on how to position each element in a website, and also it has some extra properties to the positioning of the website.

Overview

The position property enables us to control, adjust, or manipulate the location of an element within the element’s container. It tells us how to position a text, object, or an element in the document. It is like changing the location of an element in the normal document flow. The syntax is thus:

.box {
    position: static|relative|absolute|fixed|sticky
   }

We have 5 values associated with the position property. Each value has a different impact on the position of an element. When not set to any value, the default value is automatically static.

Positioning Properties

Before moving into analyzing the 5 values, some positioning properties need to be reviewed. They are the extra sauce or ingredients added to the position values to position an element. They are the top, left, right, and bottom properties. Using these properties with the values would allow a developer to position an element.

1. Top
Just like margin-top, they control the position of an element in regards to the top, pushing the element to the bottom.

.top-text {
        position: relative;
        top: 20px;
}

2. Bottom
Relative to margin-bottom, they control the position of an element regarding the bottom. In contrast, it pushed an element to the top.

.bottom-text {
        position: relative;
        bottom: 20px;
}

3 Left
The left property shifts the position of an element towards the right-hand side.

.left-text {
        position: relative;
        left: 20px;
}

4. Right
The right property shifts the position of an element towards the left-hand side.

.right-text {
        position: relative;
        right: 20px;
}

These properties are used with any measurements like the margin, i.e, px, %, rem, em, cm, etc. Any of these properties won’t have an effect if the position property isn’t declared first. They also take negative numbers but taking negative numbers would make them move in the opposite direction.

5. Z-index
This property deals with the stacking order of elements on a webpage. It controls how an element is placed on top of each other. It is used with the position values except static. Z-index only makes use of numbers and does not need any measurement like the em, rem, px, etc. By default, an element z-index is set to auto.

.top {
      position: relative;
      z-index: 1;
}

The element with a greater stack order is placed on the element with a lower stack order.

Values

Below are the CSS position values:

1. position: static
Every element in a webpage is static by default. This value is like an invisible man, it neither adds nor subtracts anything from the element. It is the default value of the position property. It tells the element to continue with the flow of the document.

.static-positioning {
        position: static;
}

Note: The top, left, bottom, right, and z-index properties do not have an effect when an element is set to static.

2. position: relative
An element set to relative position will be positioned relative to its normal position, it will also continue to the flow of the document like static but unlike static, the top, left, bottom, right, and z-index values will affect it. Element set to relative would only be visible when the positioning properties are being used with it.

.relative-position {
        position: relative;
        top: 20px;
        left: 20px;
}

The movement or positioning of an element with relative position does not affect the nearest element, it is going to overlay the element, but with the use of z-index, you can determine whether to put it on top of the element or below. The space left by the element in its original position would remain unfilled.

3. Position: absolute
An element with the absolute position is removed entirely from the document flow, unlike relative, the other element would close into the gap left by the element. An absolute positioned element is positioned relative to an element with a position property (if any, it will be positioned relative to the document body).

.absolute-position {
        position: absolute;
        top: 20px;
}

An absolute positioned element will automatically overlap another element, so we can use the z-index to set the one that is to be on top or bottom. All the positioned properties work in absolute, unlike relative position.

4. Position: fixed
An element that is set with a position value of fixed will be set relative to the viewport/document page, it is fixed to the viewport, and it is always stuck to a position irrespective of the scrolling. The positioning properties can be used to adjust the location of the element.

.fixed-position {
            position: fixed;
            top: 20px;
}

5. Position: sticky
This value is an in-between of relative and fixed positioning. The element is first positioned relative to its normal position, then after scrolling to a certain viewport in the browser, it sticks to a position in the browser.

.sticky-position {
        position: sticky;
        top: 10px;
}

The sticky position won’t work if a positioning property is not set, like the top, left, bottom, or right. Not all browsers support this value for now so it is not the best value to use during a live-production website.

Conclusion

Understanding how each value and the positioning properties work is key to developing a fluid and well-patterned website without any overlapping. The CSS position property is an essential concept that every web developer should master when seeking to create well-structured web pages.

Comments

[Abdullahi Muftau]

Nice article btw