Before, whenever we are making website and we'll add like image and then an header and then a paragraph or maybe some links or something like what we have in our project.html file
Everything kinda appear like one after the other, kinda fall together in a nice & neat order. What I mean is, your image knew not to appear on your paragraph not to cover it up and whenever you have a paragraph in a random location, it stays under whatever that was there before, like under your header or under your image.
So, everything is kinda float differently but this is good if you're going for that kinda organized boring look. It didn't give you a whole lots of control over the layout and look of your website.
In this tutorial, am gonna teach you how to change all that using something called "Absolute Positioning"
Let's make some examples, let's create 2 divs (A.K.A 2 boxes) on our webpage and let me show you how to move it around.
Create a new file and save it with absolute.html and paste the code below in the empty text editor (absolute.html)
______start at <!doctype html>______
<!doctype html>
<html>
<head>
<title>TopCrix Studio</title>
<style type="text/css">
#naija {border: 2px solid green;
position: absolute;
width: 150px;
height: 175px;
top: 40px;
left: 115px;
}
#hollywood {border: 2px solid red;
position: absolute;
width: 150px;
height: 175px;
top: 30px;
left: 15px;
}
</style>
</head>
<body>
<div id="naija">I love Naija music</div>
<div id="hollywood">I love Hollywood movies</div>
</body>
</html>
____stop at </html>______
As you can see, we have two divs (Also known as boxes).
The first contains the statement "I love naija music"
And yeah! I love sweet Nigerian music especially Naira Marley's but will never be a Marlian... Sorry, my bad! That's not why we're here
And the second div says, "I love Hollywood movies"
Have you seen "Thousand knives" filled with suspense... I can see that movie a thousand times, okay back to the topic: Absolute Positioning
The two divs were placed over each other but as you can see, we have one crossing the other on different angles, right?
I'm sure, we all know how we got those two boxes, with the border style in the CSS stylesheet, right? Yeah!
So, in other to apply that absolute positioning, here's what we did, we added the position as the property and the value will be absolute.
And since we're dealing with boxes, we need to give it a couple of things, first of all the width and height, so CSS knows how wide and tall our border is, and also the top and the left (the coordinates) to know where to place our boxes on the webpage.
That's just the simple explanation for our code. Okay?
In summation, In our first paragraph, we have a 2px solid green box, it's absolute, and the width is 150px by 175px and it's 40px down from the top and 115px from the right. This is pretty cool because we can have our elements in boxes and we can move them anywhere we want around the webpage.
In our second paragraph, we also have 2px solid red box, also absolute, and the width is 150px by 175px as well, but it's 30px down from the top and 15px from the right.
When we preview, we see something weird happens that didn't happen before. With Absolute Positioning, your box will have an absolute control over where to place your element and it doesn't care if any other element is in its way or any other boxes in its way, if it is, it will just overlaps it.
Why this is an excellent way to position elements on the webpage exactly where we want them you need to look out for some couple of things.
First of all, before.. whenever we made a website, everything just position nice and neat, now.. we run into prom of things bumping into each other or overlapping.
So... whenever you're making a website, you have to make sure you don't overlap your stuff or it's going to be hard to read, like the example we have in our webpage right now. You know, this is pretty hard to read.
Absolute Positioning is just an idea of placing an element in an absolute location no matter wth is in its way. You can actually decide to make a website and use absolute positioning to place your element but you need 2 other positions we will discuss in our next tutorial.
A good example of absolute positioning is Facebook top page (opera mini mode). We have facebook link and right at the extreme right corner (adjacently) we have "Create An Account" link as well.
