OpenTube

Become a CSS Position Pro! Learn EVERYTHING You Need to Know In Detail 🔍

Future Fullstack

35,339 views

This video explains CSS positioning in detail, covering static, relative, absolute, fixed, and sticky positioning with clear visualizations, best practice design guidance, code demonstrations and a walkthrough how to use it on a real web application.

00:00 Introduction
00:20 Normal Flow
01:24 Position Property
01:47 Static Positioning
04:22 Relative Positioning & Offset Properties
09:06 Absolute Positioning
15:56 Fixed Positioning
18:02 Sticky Positioning
19:45 Positioning Design Guidance
22:03 Positioning Summary Card
25:55 Using Positioning in a Major Project

Download links:

Download Presentation Slides: https://bit.ly/3QW1I5i
Quill starter HTML & CSS: https://bit.ly/3DAPVX2

Video Links:

Quill Project: Full Stack Project for Beginners - HTML, C...
CSS Units: CSS Full Course Tutorial for Beginners - L...
CSS Variables: CSS Full Course Tutorial for Beginners - L...
CSS Flexbox: CSS Full Course Tutorial for Beginners - L...
CSS Grid: CSS Full Course Tutorial for Beginners - L...

20 Comments

@futurefullstack Creator 1 year ago Pinned

All presentation slides and coding files can be downloaded in the description below. This video took a lot of time to make - I would greatly appreciate it if you could drop a comment to show your support!

@Khalid_Se 3 months ago

I did not get positioning until I watch this video

@EarthDarkSide 8 months ago

Now I understand CSS positioning more than I understand people. Thank you brooo ❤❤

@MeriemBatoul-f2p 9 months ago

10:22

@sacrificechronicle 1 year ago

This is an absolute $100,000 course! Thanks for giving us this for free ❤ from 🇬🇭

@olamidewilliams3115 3 weeks ago

You are a gem of an instructor

@olumax 1 year ago

"This kind consistent tutorial effort is no joke! I can tell how much thought and attention to detail you’ve poured into every section of this course. As someone who’s been struggling to master CSS, this course is a game-changer. Big thanks, you’ve got my full support—liked, commented, and subscribed!"

@casualgame1234 1 year ago

:face-turquoise-drinking-coffee:

@lynne3469 1 year ago

Thank you so much for this tutorial. I have been struggling to understand position, and the visuals you used along with your calm and methodical descriptions made it so much easier for me to understand. I have only just discovered your channel and will be watching more of your tutorials - you are an excellent teacher! 🤩

@DevRoqs 2 months ago

This tutorial saved me a lot of time, thanks 😊

@binixbig 1 month ago

I can see clearly now that full stack taught me positioning 🎶

@davidsullivan4449 1 month ago

Wow man, keep making more videos. This was awesome.

@a_n829 9 months ago

very very simple yet marvellous way of explaining,. kudos

@Mahir_uc 3 months ago

This is by far the most clear video on positioning rn on the planet . Thanks a ton

@robertbarber2910 7 months ago

Thank you , thank you. I finally understand positioning now. Great work here, the visuals helped out along with your recommentary about what and why you were changing something.

@itsMadeByCarla 1 year ago

Amazing way of teaching. You literally remove the anxiety, frustration, and confusion from everything. Sincerely appreciate the tutorials. Looking forward to the paid courses!