Let's store CSS positioning to your brain with Elon Musk - static position, relative position, absolute position, fixed position and sticky position

When i was a newbie in 2017 and just started learning web Development. CSS position is one of the most confusing concept 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 at static position and static is a default property of CSS. But we haven't ignored it you can play with CSS codepen project here.

See the Pen CSS static position by Atul Prajapati (@atulcodex) on CodePen.

Relative position

If we'll just set CSS position to relative only, it will be in default position and to make changes in Elons avatar we have to use CSS position's helper properties like top, right, bottom, left. At this position our CSS file look like this.

Now Let's set top and left position of Elon to 100 px. At this moment our Output will look like this.

See the Pen CSS relative position by Atul Prajapati (@atulcodex) on CodePen.

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.

See the Pen CSS absolute position part-1 by Atul Prajapati (@atulcodex) on CodePen.

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.

See the Pen CSS absolute position part-2 by Atul Prajapati (@atulcodex) on CodePen.

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 CCS file.

See the Pen CSS absolute with relative position by Atul Prajapati (@atulcodex) on CodePen.

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.

See the Pen CSS fixed position part 1 by Atul Prajapati (@atulcodex) on CodePen.

when we add top, left, right or bottom property Elon musk will accept those values from starting point of screen and our elon musk will stay at his fixed position it will not scroll with page content. Let's see how it will look like in codepen

See the Pen CSS position fixed part 2 by Atul Prajapati (@atulcodex) on 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.

See the Pen CSS sticky position by Atul Prajapati (@atulcodex) on CodePen.

Hey dear if you are completed learning and practicing all the steps i have mentioned here for CSS position, So congratulation you have invested your time to learn something. Very few peoples are their who invest there 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 CSS course at Eduonix. Eduonix is a learning platform for those learners who are curious to learn and grow.