CSS POSITIONING SIMPLIFIED
This is inline with my last post “HOW TO CENTER A DIV” If you’ve not read it already you can check my previous post and leave comments too I will really appreciate.
WHY UNDERSTANDING CSS POSITIONING IS IMPORTANT:
Understanding CSS positioning is important in web Dev since it gives you the ability to position your Html Element anywhere you want on your page. But it seems difficult especially for beginners. So with this article I want to break down CSS position properties to the simplest form. So if you’re a beginner after going through this article you will get to know positioning like you know your NAME and also understand the different types of position property.
Before I get into the different properties, whenever you apply a position to an element, you can offset (Move) the element with TOP, LEFT, RIGHT and BOTTOM properties, but you can use TOP and LEFT properties and that will control it vertically and horizontally.
below is a simple html consisting of a header and a box container nested inside of it. inside the box container, we have four (4) different div which we are going to turn into four different boxes.
<html>
<body>
<header class="header"> <div class="box-container"> <div class="box" id="box1">Box1</div> <div class="box" id="box2">Box2</div> <div class="box" id="box3">Box3</div> <div class="box" id="box4">Box4</div> </div></header>
</body>
<html>
CSS STYLING FOR THE DIFFERENT BOXES
.header {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}.box-container {
display: flex;
}.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 2px;
background: rgb(148, 100, 11);
color: #fff;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;}
OK since our boxes are ready we can now dive into explaining the different Properties.
TYPES OF POSITION PROPERTY
In CSS there are basically 5 different types of position properties and they include:
- Relative position
- Absolute position
- Fixed position
- Sticky position
- Static
Amongst all the position properties relative and absolute position are the two most difficult for beginners to grasp from my experience. so I will be going through each property, from what each stands for to what each of the properties do. So lets dive right in.
STATIC POSITION
This is basically the default state of every Html element. this is the same thing as not applying any position because its the default state of that particular element. If you try to apply TOP, LEFT, RIGHT OR BOTTOM offset to any of the box above while the box has this default static position applied to it, these properties will do nothing and the box will not move.
These properties have no effect on position: static.
you can try it on box1 using the code below as an example
From the example you will see that position: static has no effect on the position of an element.
#box1{
position: static;
top: 40px;
left: 40px;
}FIXED POSITIONING
When you give an element a fixed position it takes that element out of the flow of the document and we control that with the TOP and LEFT property, and wherever it is finally positioned it remains there regardless of what is happening in the page. so if you scroll your page the element doesn’t move.
this comes handy when making your top navigation bar, because most of the time you would want your navbar to be visible even when you scroll down your page.
#box2 {
position: fixed;
top: 20%;
left: 30%;
}the code above will move box2 and keep it fixed and even when we scroll the page box2 will remain in its position.
ABSOLUTE:
This is one the most important position property. when you give an element a position of absolute it takes it out of the flow of the document and positions the element relative to the nearest parent element that does not have a static position, if none of the parent element is positioned, the element will be positioned relative to the html page. this is one of the major difference between Absolute positioning and the rest of the other properties. “ABSOLUTE POSITION, POSITIONS THE ELEMENT TO THE NEAREST PARENT ELEMENT THAT IS NOT STATICALLY POSITIONED”.
In the absence of any parent element, the element will be positioned relative to the page.
#box3 {
position: absolute;
top: 25%;
left: 40%;
}
RELATIVE POSITIONING:
This is one of the most important position property. when an element is given the position of relative, it is positioned relative to itself. in other words when you give an element a position of relative its starting point is exactly where it is normally. This is one of the major difference between Absolute and Relative Position.
#box4{
position: relative;
top: 50px;
left: 30px;
}
Summary
Wow! if you read to this point then I must commend you. But I really hope this article will help you understand the CSS position property and how it works
Do well to play around with the examples if you don’t fully understand any of them, play around with changing the values and notice the difference.
The only way to get better is to practice, so go ahead use what you’ve learnt in your personal project.
Also feel free to drop your comment if there’s any point you think I need to update or change.
