Learn CSS Position In 9 Minutes

🚨 IMPORTANT:

Chances are you have heard of relative and absolute position in CSS, but did you know there are still three other positions? In this video I will be covering all five CSS positions (static, relative, absolute, fixed, and sticky) by showing you examples of each position and comparing them with each other.

This video may be short, but I cover everything about each CSS position in this video, so you can learn everything you need to know about CSS position. By the end of this video you will have a deep understanding of the interactions between the different CSS positions, so you can effectively use them in your next project.

📚 Materials/References:

🧠 Concepts Covered:

- All five CSS positions
- How absolute position interacts with the other positions
- How to use top/right/left/bottom to position elements
- How the document flow works
- When to use relative position

🌎 Find Me Here:

#CSSPosition #CSS #WebDevelopment

[Ashish-_-]

1. static: Default one.
2. relative : Same as static. But lets you add top, right, bottom, left. Makes it move relative to it's normal position
3. absolute: Removes from the flow and positions absolute wrt to the parent. Parent has to be relative or absolute for top, right, bottom, left to work. Else it considers the main html element as the parent .
4. fixed : Fixed to a place. Doesn't give two shits about the parent. Always considers html element as the parent. Stays there when scrolled.
5. sticky : Relative ( when normal) + fixed ( when scrolled). The values for top, right, bottom, left become active when scrolled

[googleuser]

Just starting out at 73 years old you've cleared a lot of confusion for an old

[gabrielgrill]

"Position in CSS is really that easy" - mate it's that easy for us because you put together & presented a absolutely top-tier lesson. Thanks for making these, they're incredibly well made and helpful!

[josephuwayezu]

THE FIVE POSITIONS
- Static Position: 0:40;
- Relative Position: 1:07;
- Absolute Position: 3:16;
- Fixed Position: 6:34;
- Sticky Position: 8:07;

OTHERS
~ Devtool/Inspecting: 0:20;
~ Summary of static, relative, and absolute positions - 5:37;
~ Difference between Fixed and Absolute: 6:59

Like if this helped you out : )

[udaypratapsingh]

the quality provided in just 9 minute is out of any expectation .. great respect

[GregwilsonAzureSecurity]

I learned more in 9 min than I have several weeks of css tutorials...thanks!

[afique]

I was going through a lot of confusing videos about this topic. But your one is super simplified.

[SCSojiro]

I had years of troubles with CSS positioning. And then I watched this and understood it in 9 minutes, as promised.
I wish I could like more than once !

[Rawkfistlol]

damn, your lessons are really so simplified, thank you so much

[phillundsoos]

Been learning coding for a few weeks now. Positioning was the first thing i was struggling with in css. Since everything else i have learned and done so far was almost a cakewalk, i was surprised how hard something so simple can be. You video cleared a lot of things up for me and it actually isn't as complicated as i thought. Thank you. The visual part of your explanation was unbelievably helpful and spared me from having to try it out on my own to understand what each position does visually.

[billynovrando]

6 months strolling around with my confusion with position and it's answered here for less than 10 minutes! Auto like auto subscribe!

[PBUK]

2:30 An important thing to note, is that although the relative element is taken out of the flow so to speak, it's space that it would sit it remains in place, this is why two and three don't jump up to the top.

[rosar.]

I usually end up zoning out during lectures or tutorials even though I want to learn the material but to my surprise I didn't for this video. The pacing of your words and the tone of your voice is good. It felt weird to sit through something from beginning to end and actually absorb all the knowledge for once. lol

[rahee]

You explained positions in 9 minutes?! Wow, very clear! Good job, sir!

[OhDaiisy]

I’m so glad I came across this. My classes had me very confused. They basically made us code whole websites but said “don’t worry about that too much” when they had to go into detail. My brain always has “but why?” in the back of my head so this is such a great explanation of things. Thank you!

[AcquahEmmanuelBaiden]

I'm so glad I found your channel, Kyle. It's been difficult really understanding CSS and in only a few minutes you are making it all clear. Thanks for truly simplifying the web for us!

[kmanLOL]

Instantly liked the video when I saw that chair spin.

[dzenish.]

Love the way you put the different pieces together. You actually do simplify topics that are not that complex. However other "teachers" tend to overcomplicate things either because they want to look smarter or they themself don't get it in the first place. Subscribed.

[jasonwhittaker]

You have explained it better in 9 minutes more than I've understood in countless courses, videos and books. Would be interesting if you did a video on how you became a good teacher at all of this.

[Hangoutapp]

Dude you don't know how much you help me in position the font awsome icons. I have looked all over. But when I watch your video I suddenly type it an found what I were looking for. Thanks dude. Thanks. Instantly 👍 this video. An subscribe.