When I was a newbie in 2017 and just started learning web development. CSS position is one of the most confusing concepts for me to understand, mostly relative position and absolute. Is that something similar happening with you ha ha ha ha. So don't worry and take a long breath. For this article, I can bet that you will never forget or confuse CSS position again in your entire life But only if you will follow all the steps and practice with prebuild codepen projects. So what are you waiting for, let's learn CSS position with Elon Musk.
In CSS we have the following values like
-Static
-Relative
-Absolute
-Fixed
-Sticky
Let's understand these position values on-by-one. CSS position property has some helping property like
-Left
-Right
-Top
-Bottom
static position
By default, every element on the web page is a static position and static is a default property of CSS. But we haven't ignored it you can play with CSS codepen project here.
Relative position
If we'll just set the CSS position to relative only, it will be in the default position and to make changes in Elon's avatar we have to use CSS position's helper properties like a top, right, bottom, left. At this position, our CSS file looks like this.
Now Let's set-top and left position of Elon to 100 px. At this moment our Output will look like this.
You can see that in the CSS relative position Elon's pic has changed his default position 100px from left and top. But keep in mind, His at this level default position of Elon pic will be blank. Other elements(paragraph) will not take his position, every element will stay at his default position except Elon Musk. If you want to be an Elon musk of CSS position I recommend you to play around with this codepen project. Ex. set left and right to -100px and share your result snapshot in a comment :) I appreciate it.
Absolute position
The unique feature of CSS absolute position, the element will leave its default position, his position will take the next element of that web page and it will scroll with page content. At this level, our web page will look like this.
Now our Elon Musk(absolute property) z-index will automatically change to z-index: 1;. If you will set the top position to 10px Mr Elon Musk will leave 10px top from starting point of the device screen not from the default position like this one.
That's all for CSS absolute position but I recommend you to play with this codepen project because reading blog posts will create lot's of mess in your brain about the core fundamental so please don't ignore to practice and share your results snapshot in a comment it means a lot for both of us.
How to use Absolute position in relative
CSS absolute position working according to the device screen but when we want to control it we can put it in the main div or element which has a relative position. For example, let's put Elon musk in box div and the box element has already set a relative position. Now the Elon musk will get the starting position of the box element, not the device screen. I hope you are clear with this example and if not, please please please play around with this codepen, it will help you to understand the core concepts ie. comment out the position property of box class which is in the CCS file.
Fixed position
If we will set an element position to fixed it will fixed at that position and his z-index value will set automatically to 1, which will look like this.
when we add top, left, right or bottom property Elon musk will accept those values from starting point of the screen and our elon musk will stay at its fixed position it will not scroll with page content. Let's see how it will look like in codepen
CSS sticky position
CSS sticky position is something similar to the fixed position but it has some difference like his initial location will be blank. Elon will sticky on some specific position and when we scroll the page then the sticky element will stick to the starting point of the device screen. I know it seems a little bit confusing so please make some changes in this codepen CSS file and feel the behaviour will help you to understand the core concepts.
Hey dear if you are completed learning and practising all the steps I have mentioned here for the CSS position, So congratulation you have invested your time to learn something. Very few peoples are there who invest their time and effort to learn something, you can also waste your time by watching Netflix and some porn videos too but you are not that kind of guy. Keep doing, keep growing.
Disclaimer: Now if want to learn CSS from industry experts then can enrol for a CSS course at Eduonix. Eduonix is a learning platform for those learners who are curious to learn and grow.
Please don't forget to share your feelings at this moment(after clearing your confusion about the CSS position) and feedback about this article. I'll love to hear from you guys, Thank you, See you soon.
Top comments (4)
No comments it means, you can understand my explanation ๐๐
๐
ahahahah, love this article. Good job!
Thanks dear ๐