Next one is fixed positioning, and it's a lot like absolute positioning in the sense that you gonna have coordinate in the top left of your webpage and just like absolute positioning its gonna move your element where absolutely where it's suppose to be but the one and main difference between fixed and absolute positioning is whenever you scroll your screen the element stay in place on your website and it doesn't move. So... It can scroll over other texts, it just gonna stay their and no matter how hard or how fast you scroll its not gonna move.
It's a kind of weird positioning but I can't just skip it because you can come across it or maybe as test to know how much you know about web development.
Let's create a new file and save it with fixed.html copy this 👇code and paste it in the empty text editor (fixed.html) file
____start at <!doctype html>_____
<!doctype html>
<html>
<head>
<title>TopCRIX Studio</title>
<style type="text/css">
#coj {border: 2px solid green;
position: fixed;
top: 50px;
left: 55px;
}
</style>
</head>
<body>
<p id="coj">Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
<p>Vote for COJ President 2023</p>
<p>Vote for PMB as the next President</p>
<p>Vote for OBJ as the next President</p>
<p>Vote for GEJ as the next President</p>
</body>
</html>
____stop at </html>_____
Now, our first paragraph which is "Vote for COJ President 2023" (which I know most of you and other countrymen will love to vote for me in the 2023 Presidential election) Oops! Hope I didn't mention the name of the country before some people will start looking for me to slice into pieces. Did I? NO! Thank God, where will I even get money to buy ticket of 50millie??
So, anyways back to business, our first paragraph is 50px down from the top and 55px from the left. So.... Exactly like absolute positioning, it takes a box and position it absolutely on your webpage exactly where you wanted it. The difference is when you scroll the absolute positioning will go off the screen but whenever you scroll fixed positioning stays fixed on your webpage. So.. No matter hard you scroll try to get it off, it will just stay there and it's annoying.
Generally we don't use fixed positioning a whole lot when making a webpage, or have you ever been to a webpage and some kind of pop-up and you just wanna get rid of it but it stays there covering the content on the website.
I just added this tutorial because I thought it was appropriate.
