Learn CSS Position In 9 Minutes

Подписаться 1,6 млн

Просмотров 2 млн

50% 1

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
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:
CSS Position Article: blog.webdevsimplified.com/202...
Sticky Position Tutorial: • The Forgotten CSS Posi...
CodePen Code: codepen.io/WebDevSimplified/p...
🧠 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:
Twitter: / devsimplified
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSSPosition #CSS #WebDevelopment

Опубликовано:

29 апр 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 2,1 тыс.

@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

@priyanshu4016 Год назад

thanks ashish for notes :)

@Jamato-sUn Год назад

Are you sure absolutely positioned element considers HTML the parent and not viewport? If you use "bottom: 0px" on it, it goes to the bottom of the screen, not bottom of the page.

@awabelmahe9700 Год назад

@@Jamato-sUn Yes, it will consider the HTML element as the parent not the viewport, but only if none of the element's parents have their position set to a value other than static, otherwise the element will be positioned realtive to that parent instead of the HTML element.

@awabelmahe9700 Год назад

Great sum up, but regarding 3, the parent position can be any value other than "static" and the element will be positioned relative to that parent, so it's not restricted to absolute and relative , but sticky and fixed works as well.

@BROOKnim Год назад

one thing to note is sticky acts as fixed when scrolled away from its orginal place. but it leaves the screen if its parent also leaves the screen

@googleuser6875 3 года назад

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

3 года назад

that's really nice to hear!

@ShowBizJunkie 3 года назад

Great Job Sir, Kudos to you for learning this. Learning is life long.

@veotic2728 3 года назад

@@ShowBizJunkie Good luck! Nobody's too old or too young to learn programming.

@bangtanchannel2730 3 года назад

Truly incredible

@tam8325 3 года назад

God Bless You.... I'm 47 and ready to throw my computer out a window!

@gabrielgrill234 10 месяцев назад

"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!

@josephuwayezu4115 2 года назад

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 : )

@HariPrasad-zk4ue 2 года назад

Who are you ? Did god sent you guys to do this kind of service ? :)

@muema_k 2 года назад

thanks

@TechBase001 2 года назад

Thanks

@Joonudschi 2 года назад

@Joseph Uwayezu. Thank you!

@willw4096 8 месяцев назад

thank you!

@afique8932 5 лет назад

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

@WebDevSimplified 5 лет назад

I'm glad I could help.

@angtranhai6457 4 года назад

Same here :D

@shaderone07 4 года назад

yup me too!

@nick.h7566 4 года назад

That's why he's Web Dev SIMPLIFIED baby!!

@muhammadanus8416 4 года назад

@@WebDevSimplified thankx bro i don't understand English Correctly but i am understanding all of thing 😛💋 thankx to you

@GregwilsonAzureSecurity 4 года назад

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

@phillundsoos4903 Год назад

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.

@udaypratapsingh8923 2 года назад

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

@SCSojiro 4 года назад

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 !

@WebDevSimplified 4 года назад

Thank you so much

@nour-eddineoumakhlouf5296 4 года назад

Good enough, but it would be better if you go slowly. There were a lot of information in a short Time. Good luck

@balajivgl 4 года назад

@@nour-eddineoumakhlouf5296 can you change video speed .5 or .75

@nour-eddineoumakhlouf5296 4 года назад

The more you see the less you know

@dushyantkaushik1923 3 года назад

@@nour-eddineoumakhlouf5296 but all of the information provided in vedio makes complete sense.:)

@yasinmete4415 3 года назад

Set playback speed to 2x to learn css positions in 4min 30sec.

@challengerssb 2 года назад

goated

@retrx4236 2 года назад

A god in of himself

@nickschmitt8594 2 года назад

I use the video speed controller extension because I'm all about the 2.5x life.

@wasimraja2980 2 года назад

More like waste 4 min 30 sec

@strangerisOPboy 2 года назад

@@-_._._- hi

@Objectified 2 года назад

One of the most concise, straightforward, and easy to understand videos on CSS position that I've seen. Perfectly fits my learning style.

@jmiller6224 2 года назад

Amazing! Great teaching, clear explanations - Really appreciate all the hard work you put into your videos, thank you much!

@kmanLOL 4 года назад

Instantly liked the video when I saw that chair spin.

@WebDevSimplified 4 года назад

It makes recording that much more fun if I spice up the intro.

@joq6356 4 года назад

Hahahaha there should be more chair spin

@ThierryBitz 4 года назад

hahaha same here

@codingmonk5606 4 года назад

😂😂😂

@vincentdufour613 4 года назад

Me searching for chair spin because i didn't notice it at the beginning and not understanding why you reference a pole dancing move :)

@PaulBrownclk-me 3 года назад

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.

@rahee3036 3 года назад

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

@jasonwhittaker3940 2 года назад

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.

@rosar.4293 4 года назад

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

@AcquahEmmanuelBaiden 3 года назад

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!

@GamingTSH 2 года назад

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️...

@concon264 2 года назад

honestly this has been one of the easiest to digest videos about positioning I've seen, the good delivery along with the clear audio and simple direction made this very enjoyable and has built my confidence with positioning! you may have me sold on your CSS course that you offer on your website if they're delivered like this!

@Rawkfistlol Год назад

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

@billynovrando9383 3 года назад

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

@mohamedyt5286 3 года назад

developer.mozilla.org/en-US/docs/Web/CSS/position would have saved you those 6 months of confusion

@GamingTSH 2 года назад

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️...

@levk4195 4 года назад

Ok.. That sticky positioning never going to escape my memory, amazing like always. Thanks you-!!

@Nebelkehlchen 2 месяца назад

For the past year I have been on and off learning CSS and the thing hindering me was my nonexisting understanding of relative and absolute. It made no sense to me whatsoever. It all makes sense now. 1 year of confusion gone. You are a true master of teaching.

@Kralnor 3 года назад

Now I finally understand the difference between static and relative and how they affect an absolute child. Great explanation!

@dzenish.2262 4 года назад

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.

@DevlogBill 2 года назад

I agree with this statement. I watched a video which explained the same concepts in 1 hour and it was overly complicated. This video is the bullet points of that overly complicated tutorial but made simple like the title of the author.

@jasylingling5760 4 года назад

i was always so confused about these positions, fortunately i found your channel and i got it now! thank you so much!! 🙏

@LifeBeyondTech Год назад

I've been writing code for both mobile and web for about 10 years now, and this channel still teaches me things. Thanks, and keep making them!

@pipash3953 Год назад

Hands down the clearest explanations for web-dev that I've ever found. You are a brilliant teacher. Thank you so much for your lessons, they are invaluable.

@vinubox 4 года назад

Finally! I found someone who really knows CSS position !

@anirban27 4 года назад

This was the one video I ever wanted. Thanks man, Great help!!

@randomride6057 Год назад

the way you explain things is just fantastic. thank you for this video.

@3house325 10 месяцев назад

This no BS fast paced teaching is so useful, it is hard to put into words. Thank you Sir.

@questionable-cf1tt 3 года назад

I've been struggling with this for a while now but I was able to put some of your explanations to good use in my job today. Thanks WDS 🙂

@shantanuchakrawarty6217 4 года назад

Thank you very much for the video. God bless you, keep it up homie :)

@FunnyMatrixMan 2 года назад

Thank you for being somebody who explains each and every single thing. Thanks a lot!

@Jsosa787 Год назад

Probably the most clear and visually friendly example I’ve seen

@hesamalavi9 4 года назад

Why are you so good at explaining this stuff :D

@vladzherditsky7373 4 года назад

Actually, you saved my mind from collapsing, cause i was like about to explode by figuring it out myself. Thx a lot for good explanation, i wish you all the best, dude :-)

@stevemusebe6662 Год назад

Bless you Brother! this is everything i have ever wanted in css in 9mins

@BenjaminCummins 2 года назад

This is great. Quick and to the point. I love the demonstration. Thank you!

@geoafrikana 3 года назад

I can't believe I've learnt positioning under 10mins. I just conquered a nightmare.

@danfox1151 3 года назад

0:00 Bruh the perfect flick XD

@sachinjadhav4474 2 года назад

I finally understood CSS position after watching and reading multiple tutorials, this was so simple and easy to understand. You are awesome!!

@marxelinim8424 7 месяцев назад

OMG the ultimate well-made and precise explanation thank you very much

@tomrago844 4 года назад

Thank you, this was explained perfectly 💙

@OhDaiisy 3 года назад

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!

@quixote5986 2 года назад

I don't think it has the right to be called a class.

@DesiRobot 2 года назад

You are a lifesaver. My job depended on me to learn a lot of languages in a short time to be versed with talking with clients. I ran through so many of your videos in a week and feel a lot more comfortable.

@chukwuemekaezugwu186 8 месяцев назад

Thank you. This video has been really helpful

@royxss 3 года назад

For my entire Youtubing lifetime, these were the most helpful 9 minutes

@rohithmsr2756 3 года назад

The best video to have a glance at CSS positioning especially for the noobs who take hell a lot of time for positioning.Thank You So Much

@alphacoorg 2 года назад

simple, to the point and easy to understand. Loved it!

@dre429 2 года назад

Watching this helped me fix a spacing issue I was having on a site of mine so thank you very much! I love your content!

@DiariesOfBen 3 года назад

Thanks mate! This is an eye-opening video! Thanks for the content. Though the source code wasn't as exact as the preview. Had to tweak it myself but loved it because I found a way out to get it done myself but might be a bit confusing for a beginner. But overall, thank you once again.

@1997oreosFTW 4 года назад

This is incredibly succinct. Thank you for the no-nonsense lesson, it was incredibly helpful

@oceanvvl 2 года назад

SUPER! Kyle you have a talent to go straight to the point and be spectacularly precise with your explanation; When I expect something to be missed, NO WAY - it is covered;

@treyjohn18 4 месяца назад

I dont think theres anyone on youtube that explains this material the way you do. Its my learning style completely. thank you!

@joelcannon58 4 года назад

Love your clear, concise presentations that cover all the essentials. I am recommending you to all my classmates.

@WebDevSimplified 4 года назад

Thank you!

@GamingTSH 2 года назад

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️...

@tiagocosta2689 Год назад

Very good explanation ! Thanks a lot for the video

@p3rf3ctionz 5 дней назад

Love it! great video man, very straight forward.

@nikkimier9830 7 месяцев назад

BEST video explanation. It all makes sense now. Thank you!!

@mohammedalzoubi9722 4 года назад

bro i wish if u were in all of my programming languages courses , u made it so simple u simplified in an amazing way thank you so much

@WebDevSimplified 4 года назад

I'm glad I could help!

@00auguste 5 месяцев назад

Its hard to believe i was actually just 9 minutes away from understanding positioning. Great video!

@Dilluded Год назад

This just clarified so much for me, THANK YOU!

@henrietta4808 Год назад

Loved this tutorial. Great work and explanation.

@sriram-zn3ic 3 года назад

"Web development simplified" is amply justified

@adirbarak5256 3 года назад

You are a superb teacher, and you are told that in pretty much every video. Try and enhance your marketing and presentation skills to propel your channel and business forward because you totally deserve it. you provide immense value.

@thomas9044 2 года назад

You are the best on youtube when it comes to explaining these kinda things. I like how you cover it up at the end of a video to make it a lot easier and simpler. Great content man, you got my subscription.

@Chinmay696 3 года назад

Absolutely brilliant explanation! Kudos!

@luis96xd 4 года назад

Whoa, this is the best video talking about positioning! It was well explained I understood everything about this. Thank you so much! You've helped me a lot! :D

@GamingTSH 2 года назад

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️...

@marisagonzalez679 4 года назад

Life makes more sense now ... Thanks very much for your video!

@WebDevSimplified 4 года назад

You're welcome

@darpananeja4751 3 года назад

Bro you nailed it!!!! Thanks a lot to take time out and do this stuff! YOU ARE THE BEST!

@pooCBH 2 года назад

thanks for the great explanation! you filled several gaps in the way I approached it

@techinfo-pbk8533 4 года назад

Finally I came to know what exactly position and when it has to use .. By spending a little. Simple and Clear.. Awesome 👍

@gilbertjohncuaresma3571 5 лет назад

Thanks for the concise videos. Keep it up. You'll reach 100k soon.

@WebDevSimplified 5 лет назад

I am just aiming for 10k first. 100k is a goal for next year.

@Patrick-iy1rb 4 года назад

@@WebDevSimplified You were aiming for just 10k two months ago now you're at 22k. Awesome work!

@WebDevSimplified 4 года назад

@@Patrick-iy1rb Thanks! The last 2 months have been pretty crazy in terms of growth for the channel.

@vmod3985 4 года назад

@@WebDevSimplified bro you're gonna go big. I can see it. GOOD LUCK

@shreyapandey6758 4 года назад

Heyy... it's now 102K that's really nice

@brandonwaggonertech 2 года назад

This was a perfect explanation of what I was looking for. Thank you!

@stephaniew5819 2 года назад

Thank you for the explanation, you made it very clear!

@digitalpain8269 4 года назад

vid: "a relative position is relative to an absolute position relatively absolute" me: (0_0)... makes sense

@mudzibaba 4 года назад

Everything was simple until that part.

@OneAndOnlyMe 3 года назад

"...even when it's fixed and sticky"

@hightowergaming5301 3 года назад

@@charlesm.2604 Well that's cleared everything up even more! THANKS!

@donotlook6048 3 года назад

Just if you position an element as absolute it'll adjust to its container. The container can be either the viewport(the whole HTML) or the container element ONLY IF ITS POSITIONED. Hope this clears something for you guys

@jasonhensley7762 3 года назад

@@donotlook6048 so what your saying is that the reason the parent went to the top was because its container was the viewport, and the 1st child goes to the top of the parent because its the container and the other children in that case would go the top of the parent element? So by this reckoning if you changed all the children to absolute 0px, and the parent to absolute 0px, they would all align at the top of the viewport?

@ebrahemluhar4999 5 лет назад

Well explained, good job.

@WebDevSimplified 5 лет назад

Thanks!

@anthonygayflor 10 месяцев назад

you made this so easy to understand with minimal fluff, thank you!

@purplexionroblox Год назад

At first I went to W3Schools to learn about position but then the site was using so complicated words so I went to RU-vid and this is what came up first. I clicked on the video and you explained it so simply that I learned it in 15 minutes. I know that the video length is 9 minutes, but I needed that extra 6 minutes for replaying parts that I missed or I didn't understand. Again, thank you so much for creating this nice and simple explanatory video!

@isaacelbaz772 3 года назад

A good example of: When you really understand an issue you can explain it (in this case and show it) in simple words many thanks buddy!

@hadijaffri9856 Год назад

bruh that turn around in the intro always gets me😂

@svnbeats6700 22 дня назад

Lol like he’s about to tell you the secret to eternal youth 😂😂😂

@maungtharkyaw8179 Год назад

really nice , Kyle. Your videos are very helpful to me and i really enjoy it

@ka_okai9 Год назад

fixed position literally fixed my problem. Your tutorials are the best ones out there hands down Thank you so much!

@waltz9230 3 года назад

What the hell, you’re literally the best educator on coding I’ve ever come across. You’re so good at explaining things and making them sound super easy and understandable, good job man, keep it up.

@cringetopia6508 3 года назад

this isn't coding its styling and markup

@GamingTSH 2 года назад

❤️👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html 👈❤️...

@sachinmalik5837 4 года назад

This Is'Absolutely'Great Video 'Relative' To Other Videos On RU-vid This One really 'Sticks Out'. It is 'Fixed' That I Am Gonna Watch All Your CSS Related Videos

@hightowergaming5301 3 года назад

I see what you did there :P

@arunsagarsa3613 8 месяцев назад

I just love you man!!, you are amazing

@artofreusing10 Год назад

You made things so much simpler! TYSM

@deepak.pahawa 5 лет назад

Nice explanation among all youtube videos on position...

@WebDevSimplified 5 лет назад

I'm really glad I could help!

@boxingtone 4 года назад

This is one of those videos I wish I could give 1,000 THUMBS UPS!

@WebDevSimplified 4 года назад

That is a lot of likes!

@mayurkathale Год назад

Really brief and quick explanation, in short simplified. We need more videos like this. Thanks.

@briangorman1079 Год назад

so incredibly helpful, especially with the exercise on the code playground. thank you for the effort put into making these tricky concepts understandable - i'm having so much more success with my coding now!!

@imajt5 4 года назад

"Any element this is relatively positioned can have absolutely position elements inside of it that will be relative to that relative position element and that's works for every position not just for relative".