Relative Positioning is kinda similar to absolute positioning but also very different. You'd be like how can it be similar and extremely different.
Let's do a lil recap of what absolute positioning does.
Create a new file and name it relative.html copy and paste this 👇 code in your empty text editor (relative.html file)
____start at <!doctype html>_____
<!doctype html>
<html>
<head>
<title>TopCRIX Studio</title>
<style type="text/css">
#coj {border: 1px solid green;
position: absolute;
top: 50px;
left: 30px;
}
</style>
</head>
<body>
<p>PMB</p>
<p>OBJ</p>
<p id="coj">COJ</p>
<p>GEJ</p>
</body>
</html>
______stop at </html>______
If we go ahead and preview this 👆🏽 what we gonna see is four paragraphs on our webpage and we gonna noticed that third paragraph moved 60px down from the top and 30px right, so.. that's what absolute positioning does.
Now.. Go ahead and change the absolute to relative.
Like this 👇
If we preview this 👆🏽 we will see that the box is now down more and over to the right, so.. we say, what exactly is going on? Because this is kinda confusing, instead of 60px from the top, it's now a lot more, why did this happened?
Well, relative positioning is different to absolute positioning, in the sense that instead of moving absolutely from the top left point of the webpage, it moves in relationship to where it will normally be.
So.. Instead of it to moved from the top of the webpage, it will move from where it was before. That's why it's more than 60px down from the very top of our webpage.
That's the different between absolute and relative. Absolute moves it from the top left point of our webpage while Relative moves it in relation to the rest.
Now you can see that we come across another thing which is whenever we take something from it normal space, we have huge of what it used to be and it doesn't look like anything is gonna fit in their.
Anyways, keep those in mind whenever you're using these 2 different types of Positioning and by the way, people usually don't layout a website all absolute or all relative. This is not like choice where you choose one or the other.
You can make an entire website all absolute or all relative but you usually use them in conjunction with one another. For example, you might have your outside box relative and then all the inside boxes will be absolute. That's common techniques people usually use but I just wanna make sure you understand the difference between them.
Pls don't think am teaching you different ways of laying out a website, don't think like that, think of how to use them together in other to give your webpage the look that you need to achieve. There's one more positioning I must teach you and again am going to show you how to tie everything together and give your website the exact look and feel that you want, and it gonna be awesome, soon you'll be making beautiful websites.
