When developing a website it is important to always understand the different kinds of positions that elements are placed. Without understanding elements positioning it will be hard to come up with a website that is neat and well organized.
These days, with the introduction of bootstrap as a framework that makes CSS easier, most developers might have a hard time understanding how elements are placed in a website file.
In CSS, there are different methods used to position elements, and each suits depending on what the end result will be, that is, relative position, absolute position, sticky position, fixed position, and static position.
Each of the positions listed above has its unique way of styling elements in the browser whenever they are defined but for this article, we shall highlight the two most used which are relative position and absolute position.
What is position in CSS
In CSS (Cascading Style Sheet), the position is a property used to define how a certain element will be displayed on a webpage. The position property supersedes other properties that define the exact location where an element will be placed on a webpage.
Without the position property, the other properties that define the number of pixels from either top, left, right or bottom will not work properly since the top-level that defines the behavior is not there.
As we highlighted above, the position property in CSS can either have the five values which include static, fixed, absolute, relative or sticky.
How to use position in CSS
First, you have to define the element that you want to define its location and the behavior it will have on the webpage like shown below
<body>
<h2>defining position</h2>
<div class="add-position">
This is a div which we will add position property to
</div>
</body>
Next, we add the CSS to the add-position class which will include the position property as shown.
Note that CSS styles are added at the head section for best practices or include a different .css file
<style>
.add-position{
position:absolute;
top:30%;
left:30%;
}
</style>
Position Absolute
This position property is used to define a position in relation to the start of the browser. When the absolute attribute is defined in the position property, it means that any value-added will be referenced from the top left of the browser where the webpage starts.
Absolute positioning does not change since it references the same location of the top and left.
When you define the position as absolute and then add the top as 30px, it means that the 30px will be from the topmost of the screen.
An example of using position absolute is as shown below
<!DOCTYPE html>
<html>
<head>
<style>
.add-position{
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<h2>defining absolute position</h2>
<div class="add-position">
This is a div which we will add absolute position property to
</div>
</body>
</html>
The output of the above code will be as follows
Position relative
The relative position property defines the position in relation to the previously defined element, that is, if there was another element defined and then the current element is assigned the relative position attribute, its position will be in relation to the previous element.
If you define that the current element will be 30px from the top, it will be interpreted as 30 pixels from the previous element. If there is no previous element defined, the relative will be as from the start of the webpage in the browser.
An element with a position relative attribute may have its position vary from one point to another due to the fact that it is dependent on another element.
An example of showing position relative is as shown
<!DOCTYPE html>
<html>
<head>
<style>
.add-position{
position:relative;
top:100px;
left:100px;
}
</style>
</head>
<body>
<h2>defining relative position</h2>
<div class="add-position">
This is a div which we will add relative position property to
</div>
</body>
</html>
The output of the above code is as shown
From the two image screenshots, you will notice that the position of the text is different depending on the attribute used. In absolute position, you will note that the text with style is closer to the title but in relative positioning, the text is far from the title.
Conclusion
In the above discussion we have highlighted the differences between position relative and position absolute where we have seen that in position absolute, the position is dependent on the start of the browser while in position relative, the position is in relation to the previous element.
