Learn CSS Position In 9 Minutes

Поделиться
HTML-код
  • Опубликовано: 12 янв 2025

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

  • @gabrielgrill234
    @gabrielgrill234 Год назад +130

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

  • @Ashish-_-
    @Ashish-_- 2 года назад +1090

    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
      @priyanshu4016 2 года назад +23

      thanks ashish for notes :)

    • @Jamato-sUn
      @Jamato-sUn 2 года назад +8

      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
      @awabelmahe9700 2 года назад +8

      @@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
      @awabelmahe9700 2 года назад +9

      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
      @BROOKnim Год назад +3

      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
    @googleuser6875 4 года назад +2345

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

    •  4 года назад +106

      that's really nice to hear!

    • @ShowBizJunkie
      @ShowBizJunkie 4 года назад +118

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

    • @veotic2728
      @veotic2728 4 года назад +107

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

    • @bangtanchannel2730
      @bangtanchannel2730 4 года назад +22

      Truly incredible

    • @tam8325
      @tam8325 4 года назад +97

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

  • @josephuwayezu4115
    @josephuwayezu4115 3 года назад +526

    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
      @HariPrasad-zk4ue 3 года назад +11

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

    • @muema_k
      @muema_k 3 года назад +3

      thanks

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

      Thanks

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

      @Joseph Uwayezu. Thank you!

    • @willw4096
      @willw4096 Год назад

      thank you!

  • @Assalamualaykum001
    @Assalamualaykum001 3 года назад +3

    I have been using css for 4 years and positions were always headache to me but now I got clear idea of it... thanks a ton

    • @Assalamualaykum001
      @Assalamualaykum001 3 года назад

      This is your first video I saw... it helped me great... I am gonna explore your entire channel

  • @Gregwilson3468
    @Gregwilson3468 4 года назад +152

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

  • @afique8932
    @afique8932 5 лет назад +1141

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

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +61

      I'm glad I could help.

    • @angtranhai6457
      @angtranhai6457 5 лет назад +1

      Same here :D

    • @shaderone07
      @shaderone07 5 лет назад

      yup me too!

    • @nick.h7566
      @nick.h7566 5 лет назад +10

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

    • @muhammadanus8416
      @muhammadanus8416 4 года назад +1

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

  • @SCSojiro
    @SCSojiro 5 лет назад +265

    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
      @WebDevSimplified  5 лет назад +16

      Thank you so much

    • @nour-eddineoumakhlouf5296
      @nour-eddineoumakhlouf5296 4 года назад +1

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

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

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

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

      The more you see the less you know

    • @dushyantkaushik1923
      @dushyantkaushik1923 4 года назад +1

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

  • @udaypratapsingh8923
    @udaypratapsingh8923 2 года назад +18

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

  • @phillundsoos4903
    @phillundsoos4903 2 года назад +7

    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.

  • @billynovrando9383
    @billynovrando9383 4 года назад +70

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

    • @mohamedyt5286
      @mohamedyt5286 4 года назад

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

    • @GamingTSH
      @GamingTSH 3 года назад

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️...

  • @rosar.4293
    @rosar.4293 4 года назад +63

    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
    @AcquahEmmanuelBaiden 4 года назад +75

    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
      @GamingTSH 3 года назад

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️...

  • @Rawkfistlol
    @Rawkfistlol 2 года назад +33

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

  • @jotarokujo312
    @jotarokujo312 2 месяца назад +5

    I discovered this channel through The Odin Project. Thanks for these amazing informative content.
    Funny thing is, initially many comments like "who came from The Odin Project?" were common under the foundational videos linked in the course. However, as I progress further, I notice fewer of these comments, despite the channel being linked as frequently as before, if not more. It seems that many may have discontinued their learning journey :(

    • @ecstasy7804
      @ecstasy7804 24 дня назад

      Yeah unfortunately, but salutations to us who are still going strong🍻🍻🍻

  • @PB72UK
    @PB72UK 4 года назад +81

    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.

  • @dzenish.2262
    @dzenish.2262 4 года назад +41

    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
      @DevlogBill 2 года назад +1

      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.

  • @levk4195
    @levk4195 4 года назад +21

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

  • @jasonwhittaker3940
    @jasonwhittaker3940 3 года назад +9

    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.

  • @OhDaiisy
    @OhDaiisy 3 года назад +5

    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
      @quixote5986 3 года назад +1

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

  • @kmanLOL
    @kmanLOL 5 лет назад +759

    Instantly liked the video when I saw that chair spin.

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +94

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

    • @joq6356
      @joq6356 5 лет назад +16

      Hahahaha there should be more chair spin

    • @ThierryBitz
      @ThierryBitz 5 лет назад +1

      hahaha same here

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

      😂😂😂

    • @vincentdufour613
      @vincentdufour613 4 года назад +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 :)

  • @rahee3036
    @rahee3036 3 года назад +15

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

  • @vinubox
    @vinubox 5 лет назад +11

    Finally! I found someone who really knows CSS position !

  • @hads291
    @hads291 2 года назад

    That chair spin gets me everytime, you're great kyle!

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

    This was the most concise intro to a web topic I have ever seen. Your style of teaching is awesome. Also no tangents, no "please subscribe" in the middle of the lesson. Awesome.

  • @royxss
    @royxss 4 года назад +4

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

  • @vladzherditsky7373
    @vladzherditsky7373 5 лет назад +8

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

  • @mohammedalzoubi9722
    @mohammedalzoubi9722 5 лет назад +7

    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

  • @jaisalshah7731
    @jaisalshah7731 3 года назад

    I was onto a problem for almost 3 days, and now watching this video... It is solved!!!.... Holy Crappp this guy is amazing!!!!!!!!!!!!!!!

  • @Jsosa787
    @Jsosa787 2 года назад +2

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

  • @00auguste
    @00auguste Год назад +2

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

  • @hesamalavi9
    @hesamalavi9 5 лет назад +19

    Why are you so good at explaining this stuff :D

  • @Kralnor
    @Kralnor 3 года назад +6

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

  • @austinevick
    @austinevick Год назад

    This video came to my rescue after battling with CSS positioning for almost an hour. Thanks Kyle

  • @lonleybeer
    @lonleybeer 3 года назад +1

    Bro you saved my life with this video, when my teacher explained positions i was confused as hell but this really helped

  • @yasinmete4415
    @yasinmete4415 4 года назад +464

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

    • @challengerssb
      @challengerssb 3 года назад +1

      goated

    • @retrx4236
      @retrx4236 3 года назад +4

      A god in of himself

    • @nickschmitt8594
      @nickschmitt8594 3 года назад +7

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

    • @wasimraja2980
      @wasimraja2980 3 года назад +10

      More like waste 4 min 30 sec

    • @strangerisOPboy
      @strangerisOPboy 3 года назад

      @@randomuploaderguy hi

  • @waltz9230
    @waltz9230 3 года назад +6

    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
      @cringetopia6508 3 года назад

      this isn't coding its styling and markup

    • @GamingTSH
      @GamingTSH 3 года назад +1

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️...

  • @marisagonzalez679
    @marisagonzalez679 5 лет назад +11

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

  • @cuoivelo8360
    @cuoivelo8360 Год назад

    I search for a lot of websites to understand the difference between absolute and relative position in CSS. Yours makes me understand it better. Thank you

  • @technohellscape
    @technohellscape 3 года назад +1

    These tutorials are helping me slightly less hate CSS, which is a tremendous accomplishment. Thank you for doing these.

  • @joelcannon58
    @joelcannon58 5 лет назад +6

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

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад

      Thank you!

    • @GamingTSH
      @GamingTSH 3 года назад +1

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️...

  • @gilbertjohncuaresma3571
    @gilbertjohncuaresma3571 5 лет назад +28

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

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

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

    • @Patrick-iy1rb
      @Patrick-iy1rb 5 лет назад +1

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

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

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

    • @vmod3985
      @vmod3985 5 лет назад +1

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

    • @shreyapandey6758
      @shreyapandey6758 5 лет назад +1

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

  • @adirbarak5256
    @adirbarak5256 4 года назад +4

    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.

  • @feshii
    @feshii 4 месяца назад

    0:40 - position static (default)
    1:16 - position relative (same as static but you can change its top, bottom, right, leftrelatively to itself)
    3:20 - position absolute (html acts as if the element is not there at first. It is positioned relatively to first parent that position differs from static)
    6:40 - position fixed (Always relative to entire html. Fixed position at page. You can change its top, bottom etc)
    7:55 - position sticky (combination of fixed and relative position. At a certain scroll, sticks to the page)

  • @itameio6161
    @itameio6161 2 года назад

    I don't know why I've been putting this aside for years, but I'm glad I actually watched a video about position. Great video.

  • @isaacelbaz772
    @isaacelbaz772 4 года назад +8

    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!

  • @jasylingling5760
    @jasylingling5760 5 лет назад +4

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

  • @jmiller6224
    @jmiller6224 3 года назад +10

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

  • @purplexionroblox
    @purplexionroblox 2 года назад +2

    At first I went to W3Schools to learn about position but then the site was using so complicated words so I went to RUclips 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!

  • @treyjohn18
    @treyjohn18 Год назад

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

  • @sachinmalik5837
    @sachinmalik5837 5 лет назад +20

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

  • @sriram-zn3ic
    @sriram-zn3ic 4 года назад +5

    "Web development simplified" is amply justified

  • @spatialnasir
    @spatialnasir 3 года назад +9

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

  • @gadoosher
    @gadoosher Год назад +1

    Ridiculously clear and concise explanation. This was confusing the hell out of me.

  • @3house325
    @3house325 Год назад +1

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

  • @boxingtone
    @boxingtone 5 лет назад +5

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

  • @luis96xd
    @luis96xd 5 лет назад +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
      @GamingTSH 3 года назад

      ❤️👉 ruclips.net/video/lmIwYLFYZ9U/видео.html 👈❤️...

  • @1997oreosFTW
    @1997oreosFTW 5 лет назад +6

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

  • @Pareshbpatel
    @Pareshbpatel 3 года назад

    Beautifully explained. Thank you.
    {2021-05-28 09:33}, {2024-05-12 09:13}

  • @numtwentysix
    @numtwentysix 3 года назад

    I learned css grid & flexbox to create layout and then stop learning css to quickly jump into javascript, until get stuck to relatively positioning element when creating responsive navbar, aaand this video save my day. Thanks Kyle!

  • @techinfo-pbk8533
    @techinfo-pbk8533 4 года назад +5

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

  • @DiariesOfBen
    @DiariesOfBen 4 года назад +5

    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.

  • @shantanuchakrawarty6217
    @shantanuchakrawarty6217 5 лет назад +11

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

  • @zakktheera9838
    @zakktheera9838 2 года назад

    I almost cry, that I finally get out of this positioning confusion! Thank you so much, you are like my God.

  • @scaramoucheysimp
    @scaramoucheysimp 3 года назад

    i basically didn't understand this at all in the last few years since i started learning css, and my professor explained it to me like three times, drawing it out, i watched youtube videos, read about it, practiced on my own, and this is the video that helped me understand. until now, i was just assigning positions at random until it "worked". thank you!!

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

    Nice explanation among all youtube videos on position...

  • @danfox1151
    @danfox1151 4 года назад +29

    0:00 Bruh the perfect flick XD

  • @digitalpain8269
    @digitalpain8269 5 лет назад +250

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

    • @mudzibaba
      @mudzibaba 5 лет назад +39

      Everything was simple until that part.

    • @OneAndOnlyMe
      @OneAndOnlyMe 4 года назад +6

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

    • @hightowergaming5301
      @hightowergaming5301 4 года назад

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

    • @donotlook6048
      @donotlook6048 4 года назад +2

      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
      @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?

  • @miw879
    @miw879 3 года назад

    Whenever I see your video I immediately hit like without even watching it first because I am 100% sure your content would already be worth watching ads and clicking on them and then creating a fake email id and registring on those ad portals so you get my absolutely free tip that I share from heart. Always good quality content Love this!.

  • @Objectified
    @Objectified 2 года назад +1

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

  • @ebrahemluhar4999
    @ebrahemluhar4999 5 лет назад +8

    Well explained, good job.

  • @hadijaffri9856
    @hadijaffri9856 2 года назад +3

    bruh that turn around in the intro always gets me😂

    • @svnbeats6700
      @svnbeats6700 8 месяцев назад +1

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

  • @imajt5
    @imajt5 5 лет назад +6

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

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

    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.

  • @TemuujinBasankhuu
    @TemuujinBasankhuu Месяц назад

    Really easy to understand and the narrative flow is so consistent. 10/10 video.

  • @LiebensteinMovies
    @LiebensteinMovies 4 года назад +212

    And now count the words "relative","absolute" and "static".

    • @mehulgarg7948
      @mehulgarg7948 4 года назад +4

      means?

    • @aniketsharma1719
      @aniketsharma1719 4 года назад +7

      @@mehulgarg7948 he meant look how easy he made it for us great job @Web dev Simplified

    • @kinglurex1491
      @kinglurex1491 4 года назад +12

      party game: drink every time he says "relative", "absolute" or "static"

    • @baumeimo
      @baumeimo 3 года назад +1

      challenge acceptet, start drinking beer at everey keyword :)

    • @dontbetoxic4387
      @dontbetoxic4387 3 года назад +1

      try doing it at every word he says

  • @tiagocosta2689
    @tiagocosta2689 2 года назад +3

    Very good explanation ! Thanks a lot for the video

  • @learner246
    @learner246 Год назад +8

    If you're from TOP, don't give up.

    • @mesakhlolo8611
      @mesakhlolo8611 Год назад

      i am from TOP too bro

    • @jotarokujo312
      @jotarokujo312 2 месяца назад

      Same! I'm seeing less and less people from TOP lol, which back in the foundations used to get thousands of likes. Anyway how far are you in the course?

    • @jotarokujo312
      @jotarokujo312 2 месяца назад

      @@mesakhlolo8611 How far are you? Did you manage to finish the course?

  • @carawalteji9800
    @carawalteji9800 2 года назад +1

    I definitely enjoyed it!. Good job Sir

  • @ExpertLevelZero
    @ExpertLevelZero 2 года назад

    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!

  • @Chris-uy1uz
    @Chris-uy1uz 4 года назад +20

    9:08 Confirmed that he is, in fact! a robot

  • @bashehu
    @bashehu 4 месяца назад +6

    Where are my Odin bro's?

  • @arhabersham
    @arhabersham 5 лет назад +12

    [Insert “shut up and take my money” meme here]*

    • @AbhishekBM
      @AbhishekBM 4 года назад +1

      I would've if I could've

  • @Guaardado44
    @Guaardado44 2 года назад

    Thank you! As many, I also had years of troubles with CSS positioning and after your video I was able to fix a CSS bug instantly.

  • @parenthecoltsenr
    @parenthecoltsenr 2 года назад

    Holy moly. First minute of this video and I realize how good this instruction is and how much I will learn

  • @AndreGreeff
    @AndreGreeff 5 лет назад +40

    You're using terminology in a wrong and misleading manner... "position: relative" does NOT remove the element from the normal document flow, it retains the normal flow and shift's it's position *relative* to the "static" position. The concept of "removing an element from the document flow" affects other elements more than itself. So while you're correctly showing how each of the positioning rules could be used, I'm afraid your explanation of the reasons behind that behaviour is incorrect...
    To quote Mozilla's CSS "position" page regarding "position: relative":
    > The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

    • @leisti
      @leisti 5 лет назад +11

      Indeed. A better explanation would be that giving an element a relative position leaves behind a "ghost" element in the same place in the document flow as when it had the "static" position, causing the other elements to take it into account in their positioning just as in the "static"; then the visible element is moved based on the values of top, right, bottom, and left.
      Oh, and the plural of "child" is "children", not "childs".

    • @mohanbarman5982
      @mohanbarman5982 5 лет назад

      Yes, you are absolutely right.

    • @ZikoHendrix
      @ZikoHendrix 4 года назад

      if you guys could simplify more, especially @Teemu Leisti talking about ghosting elements. That would be really great. Thank you.

    • @netxyz00
      @netxyz00 4 года назад +1

      You guys are right, but it is hard to understand:-)

    • @AndreGreeff
      @AndreGreeff 4 года назад +1

      For anyone who can't quite wrap their heads around CSS positioning, I would honestly suggest you read the official MDN documentation... It's perfectly clear by itself and doesn't need any paraphrasing.

  • @carbastan6605
    @carbastan6605 Год назад +3

    what the hell was dat 180 degrees rotation in the beginning

  • @user-vf6ng9pi9r
    @user-vf6ng9pi9r 4 года назад +5

    Your voice is like "Spider-Man: Homecoming Voice Change Interrogation Scene"

  • @mrengine970
    @mrengine970 2 года назад +1

    You sir just gained a new subscriber

  • @DesiRobot
    @DesiRobot 3 года назад

    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.

  • @priyanzhu
    @priyanzhu 3 года назад +1

    Thank you so much sir ! This positioning always freaks me out ! But now cuz of u I learned every position's job !!!

  • @montenegromf
    @montenegromf 3 года назад

    This is the best lecturer about CSS Position I have ever seen. Thanks man

  • @Skahaggus53
    @Skahaggus53 2 года назад +1

    GOD, position has seemed so weird to me. This helps it actually make sense. Thank you!

  • @devJOE-Man
    @devJOE-Man 2 года назад

    This is absolutely the BEST video explaining CSS positions.

  • @miyazakizachary5108
    @miyazakizachary5108 3 года назад

    After watching this video, I must say that you are really an expert in CSS. The way you explain this confusing CSS that has bugging me for years is very amazing. Thanks a lot!!!

  • @babalolakehindebenjamin5704
    @babalolakehindebenjamin5704 3 месяца назад

    Being struggling with Position for as long as possible, thanks for this breakdown

  • @pranjalck
    @pranjalck 3 года назад +1

    Ur 8-10mins videos>>>>>> 2hrs. Boring classes🙌🏻😍 thanks!!

  • @mubassirhabib1861
    @mubassirhabib1861 11 месяцев назад

    Mate, you are an absolute legend!. Excellent content to clear all of the confusions about CSS positioning in 9 min. Super glad that I found your channel. Thank you.

  • @pipash3953
    @pipash3953 2 года назад

    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.

  • @ka_okai9
    @ka_okai9 2 года назад

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