CSS position properties (relative, absolute, fixed, position sticky, and floats) - Webflow tutorial

Поділитися
Вставка
  • Опубліковано 10 лис 2024

КОМЕНТАРІ • 146

  • @MustaphaHamoui
    @MustaphaHamoui 3 роки тому +113

    I swear to God, I've been doing web development for 20 years, and this is the first time I truly understand the difference between these property values...

    • @FredRosa
      @FredRosa Рік тому +1

      There should be a nobel prize for tutorials, really.

  • @Kabarza
    @Kabarza 4 роки тому +101

    No one can top these videos.

  • @brunoharari6454
    @brunoharari6454 4 роки тому +83

    One of the best videos I have seen about CSS

    • @Webflow
      @Webflow  4 роки тому +9

      Thank you for your kind words, Bruno!

  • @thomasright1359
    @thomasright1359 4 роки тому +62

    I've already watched like 100+ hours of content with this guy. I don't even use Webflow. Just love these videos

  • @anneemerick7849
    @anneemerick7849 6 місяців тому +1

    I love the combination of covering what is kind of a super-boring topic in a way that is informative, energetic and mildly humorous.

  • @ayushkumarchandra
    @ayushkumarchandra 3 роки тому +19

    As a developer understanding css position properties took me an entire day, as a designer I learnt it in 17 minutes watching this video!
    Thanks a lot! 👍

  • @VinayPateel
    @VinayPateel 2 роки тому +12

    First, I'm blown away by the power of Webflow. Second, [changes z-index to make it first] your teaching is so brillant. It is exactly what's needed to make learning this complex subject fun!

    • @Webflow
      @Webflow  2 роки тому

      Glad we were able to help!!

  • @gabrielcameron
    @gabrielcameron 3 роки тому +10

    I think I’m falling hopelessly in love with Webflow. This is the second Webflow employee in as many days that I have been given no choice, but to refer to as delightful.
    It used to be that the only viable way to learn something about Webflow was to watch Ran Segal over at Flux. Webflow university existed, but the content often felt like a chore. But now, now!? Webflow University is fully accredited and this man (what’s his name?) is the headmaster. Ran’s still awesome, too.

  • @Sohailkhan2001
    @Sohailkhan2001 3 роки тому +31

    I can imagine the hard work behind bringing us such amazing content.

  • @anushgopalakrishnan
    @anushgopalakrishnan 3 роки тому +6

    I've been trying to learn CSS properly for over 3 years now and I haven't heard a more simple and understandable explanation for positioning in CSS until this video

  • @arvindravi3938
    @arvindravi3938 4 роки тому +19

    This is brilliant. Thank you!! All the professors and teachers should learn from you on how to teach.

  • @peterwolftips
    @peterwolftips Рік тому +1

    The guy is a literal star, no doubt.

  • @pashafrancuz2367
    @pashafrancuz2367 3 роки тому

    Where were you when I was at school?
    This is the way how teachers supposed to teach at schools. He just literally make learning so sophisticated-fun simple and no painful at all. Thank you!

  • @Kimjung7712
    @Kimjung7712 3 роки тому +2

    Man, You taught me which my University could not. You speak like scientists with confidenceand clear explanation without any off topic. Keep doing that, you have a new follower today. Thanks.

  • @mcgreevs24
    @mcgreevs24 3 роки тому +1

    Where has this teacher / course been all my life? Amazing.

  • @ТатьянаЛассан-у8й
    @ТатьянаЛассан-у8й 2 роки тому +1

    Гримур лучший !!! только он!! всё очень доходчиво, правильно и кратко объясняет!!

  • @FaisalAhmadNoori
    @FaisalAhmadNoori Рік тому +1

    This is the absolute and practical explanation of Positions. Thank you

  • @DonNETRiNO
    @DonNETRiNO 5 місяців тому +1

    This is top-notch level tutorial stuff. Huge kudos

  • @joeypham1279
    @joeypham1279 3 роки тому +7

    This is incredible, he made the concept of positioning so much easy to understand.

  • @elizabeth4689
    @elizabeth4689 3 роки тому

    i'm a designer who knows nothing about coding and these videos are a godsend!

  • @josh_ux
    @josh_ux 10 місяців тому +1

    This guy is seriously so funny! Keep up the great work with these training videos.

  • @YAakash
    @YAakash 3 роки тому

    i'm just awed by technical humors in the explanation.

  • @thecsspage5603
    @thecsspage5603 3 роки тому +4

    Loved the content !! It's like attending a premium quality lecture!!!!!!!

  • @michaelklepacz
    @michaelklepacz 2 роки тому

    For real have y’all won an award yet for these how to videos?

    • @Webflow
      @Webflow  2 роки тому

      The real awards are the friends we've made along the way. ❤️

  • @binuavin
    @binuavin 2 роки тому +2

    I ABSOLUTE'y loved and CLEARly understood the RELATIVEly simple STATIC review. Your videos really STICKS. 😁😁

  • @arulmuruganK94
    @arulmuruganK94 3 роки тому

    A very underrated video on CSS position

  • @stegoheg
    @stegoheg 4 роки тому +4

    These videos are outstanding, well explained, straight to the point, comprehensive and funny! Incredible. Thanks so much!

  • @shashank4271
    @shashank4271 4 роки тому +8

    The only hard part i had in webflow, now learnt✊✊✊. Thank you guys

  • @Chatshigetbangd
    @Chatshigetbangd Рік тому

    This teacher is a Top G

  • @tunesy__
    @tunesy__ 3 роки тому

    Better than any teacher I ever had in High School

  • @JuanRojas956
    @JuanRojas956 3 роки тому +5

    4 years of computer programming courses and I never understood positioning properties until now.

  • @ThomasCasserly
    @ThomasCasserly Рік тому +1

    Really well explained with great examples. Very straight faced delivery had me confused until the very straight faced jokes were introduced which I loved. Informative, intelligent AND Funny. Loved it 🤩🤩

  • @Jetisback00
    @Jetisback00 3 роки тому

    Whoever hired this guy at Webflow made a great decision.

  • @sandeep17k3b
    @sandeep17k3b 4 роки тому

    Came to understand the positioning in webflow but understood the real CSS positioning much better!

  • @fatokifemiemmanuel8565
    @fatokifemiemmanuel8565 3 роки тому +1

    you are the best, you just made my day. No better way of teaching . Consider me one of your student

  • @leonardomaldonado6907
    @leonardomaldonado6907 3 роки тому +2

    You guys are simply amazing. Teaching web design and dev at the same time. Learned so much from you! Greetingss from brazil 🇧🇷

  • @problemimentali
    @problemimentali 4 роки тому +3

    After 15 years of trials and errors I finally understood this.

  • @bjb7587
    @bjb7587 2 роки тому

    Excellent content and presentation. Well planned script, wry comments. Far better than the previous video I watched, with a guy seemingly winging it by demonstrating technique with no explanation.
    When/if I get through all this, I can get back to ST Insurrection.

  • @rajanshankara6242
    @rajanshankara6242 4 роки тому

    Man, these are good videos. Quality in speed, script and humor.

  • @aadershchaubey1399
    @aadershchaubey1399 3 роки тому

    We rarely find any video made in such a great way

  • @roccons
    @roccons 9 місяців тому +1

    "Now ...there are far less infuriating ways to build common layouts" That was a good one!! haha

  • @maitrishah2364
    @maitrishah2364 2 роки тому

    Excellent tutorial!!! Not just about Webflow, but about CSS as well.

  • @nuvweb
    @nuvweb Рік тому +1

    Amazing, just what i need!!

  • @RishabKapadia
    @RishabKapadia 2 роки тому

    Knock Knock. Is this the greatest channel to learn web fundamentals?

  • @BezUmiaru
    @BezUmiaru 3 роки тому

    These tutorials and a presenter is just another level !!! So great!

  • @mahieddine_amamra
    @mahieddine_amamra 2 роки тому

    Very informative and very entertaining...this guy should present the Oscars lol

  • @FeedbackWrench
    @FeedbackWrench 3 роки тому

    Man, we LOVE webflow. I can't believe I ever used wordpress.

  • @king_m
    @king_m 4 роки тому

    These videos make learning to use webflow a breeze.

  • @bigKids__official
    @bigKids__official 4 роки тому +1

    Awesome! Watched out a range of videos about positioning, but this one is the most easy to grasp. Excellent! Keep going.

    • @Webflow
      @Webflow  4 роки тому

      Thank you, Firuz! We're launching lessons on positioning, layout, typography, and more - glad this one was easy to grasp!

  • @chrismlone
    @chrismlone 4 роки тому +1

    best educational videos on the web by far.

  • @adnenbilajbegovic9277
    @adnenbilajbegovic9277 4 роки тому

    You guys are the best. Like the way you teach us about the use of your tools. More of these.

  • @nicolecmar5008
    @nicolecmar5008 3 роки тому +2

    Fixed positioning... Meryl Streep is always there. Haha, best tutorials out there!

  • @Flowkey247
    @Flowkey247 10 місяців тому +1

    On to the next video!

  • @k3tna
    @k3tna 4 роки тому +1

    I can't express how good that it. Glad I've stumbled upon this.

  • @jasonitbzhao6173
    @jasonitbzhao6173 4 роки тому +2

    love this guys humor

  • @Zakeusa
    @Zakeusa 4 роки тому

    this deserves millions of views

  • @chrisburrows4273
    @chrisburrows4273 3 роки тому

    Great instructor, clear and entertaining.

  • @Snatick.u
    @Snatick.u 4 місяці тому +1

    This guy should be the onr invented the web

  • @dhpdaedalusStudio
    @dhpdaedalusStudio Місяць тому

    These videos are so good!

  • @Concept2035
    @Concept2035 3 роки тому +3

    That will help me get out of my shell at parties, bring up z-index as ice breakers

  • @bestclipsandtitles6336
    @bestclipsandtitles6336 2 роки тому

    Webflow.. you guys ROCK!!!!

  • @aleexious2466
    @aleexious2466 4 роки тому

    Great way of teaching. nailed it like a pro.

  • @GameMaster-b3n
    @GameMaster-b3n Місяць тому +2

    geiles video digga

  • @nguyenquangngoc3993
    @nguyenquangngoc3993 3 роки тому +1

    this is what happens when you want to be a standup comedian but your mom want you to be a teacher :)) love these content

  • @beware5159
    @beware5159 2 роки тому +1

    This guy knows his shit!

  • @saraannpaske
    @saraannpaske 8 місяців тому +1

    I was like "What‽" seconds before he said " that was a terrible sentence" lol

  • @berniejr5338
    @berniejr5338 4 роки тому

    You just made my life a lot easier, thanks a lot.

  • @itshungle
    @itshungle 3 роки тому

    Thanks to this very significant course! It really helps

  • @zlatkozeco7951
    @zlatkozeco7951 3 роки тому

    This teacher is just amazing!!!
    What is this tool he is using?

  • @GameMaster-b3n
    @GameMaster-b3n Місяць тому +2

    achsoooo jetzt verstehe ich es

  • @nekochan5465
    @nekochan5465 Рік тому +1

    Thank you! very useful!

  • @usernightwww-ahite1t2f0y
    @usernightwww-ahite1t2f0y Рік тому +1

    Who is this guy? I want to hire him; he's like some kind of Deadpool.

    • @Webflow
      @Webflow  Рік тому

      Speaking of Deadpool... ua-cam.com/video/ga15Oqkafag/v-deo.html

  • @GameMaster-b3n
    @GameMaster-b3n Місяць тому +2

    Webflow ist so eine geile platform #Webflow #nofigma

  • @shahadsidek6550
    @shahadsidek6550 2 роки тому +1

    Thank you for the amazing content, I just entered the WEb Development course and I would like to know what program are you using?

    • @Webflow
      @Webflow  2 роки тому +1

      The app is called Webflow. You can try it now by signing up for free at webflow.com

  • @ldpuri
    @ldpuri 2 роки тому

    Really well explained!

  • @johnnyhugill6744
    @johnnyhugill6744 3 роки тому

    You guys are genuinely so funny

  • @mustaqimahmed3304
    @mustaqimahmed3304 Рік тому +1

    @Webflow
    @9:33 When i place the child dive block inside 80% of dark opacity dive block , the child element also inherit the 80% opacity so how to fix the child element opacity to 100%? In the Opacity effect the child opacity is 100% but visually its opacity is also 80% means all the body is shown behind both the parent and child element.

    • @Webflow
      @Webflow  Рік тому

      Can you post a link to your project so I can see the issue?
      university.webflow.com/lesson/share-your-site

    • @GameMaster-b3n
      @GameMaster-b3n Місяць тому

      @@Webflow no

  • @hassanalhobail8084
    @hassanalhobail8084 Рік тому

    I love Webflow

  • @glaDos-
    @glaDos- 3 роки тому +1

    Every time someone asks me why I've switched to Webflow I show them these videos.

  • @vipera7448
    @vipera7448 4 роки тому +3

    Do these things matter: no. But yes, they do!

  • @totaldomination247
    @totaldomination247 Рік тому +1

    z index talked about at parties my sides have gone to space :D

  • @vanshsinghtanwar4088
    @vanshsinghtanwar4088 3 роки тому

    Diffrence between-
    1.static and relative
    2. relative and absolute

    • @Webflow
      @Webflow  3 роки тому

      Hi Vansh! Great question! Here's a detailed guide on position properties in Webflow:
      university.webflow.com/lesson/position-floats-and-clear-settings

    • @vanshsinghtanwar4088
      @vanshsinghtanwar4088 3 роки тому

      @@Webflow Thanks!

  • @StillOnTrack
    @StillOnTrack 2 роки тому

    I'm enjoying and learning from these videos, but I have to say you guys run through the content REALLY fast. I know it's a "Crash Course" but it's faster than I can even take notes and comprehend fully at the same time. I have to go back over and over again to re-listen to the same info to make sure I'm taking accurate and relevant notes. Slowing down via the playback speed settings in UA-cam helps a little, but it's more an effect of how the videos were devised to be paced in the first place. Very little "white space" to use a design term.

  • @orincywhytedesigns
    @orincywhytedesigns 2 роки тому

    This guy is awesome holy crap 🤣

  • @wwetv339
    @wwetv339 4 роки тому +1

    What is the name of program he is using? I guess , it is a good way to practice new stuff.

  • @dimovalkanov5398
    @dimovalkanov5398 2 роки тому

    How to make elements floating before the image? Thanks.

  • @taishibikiqe8796
    @taishibikiqe8796 4 роки тому

    Make so much sense. Muchas gracias

  • @mustafaedward5531
    @mustafaedward5531 4 роки тому

    This is just AMAZING!!!!

  • @shubhamparekh9808
    @shubhamparekh9808 4 роки тому +5

    Sir can i Connect the firebase database in webflow?

    • @jpthedio
      @jpthedio 4 роки тому

      Here. :)
      ua-cam.com/video/30AIpEnsEaQ/v-deo.html

    • @shubhamparekh9808
      @shubhamparekh9808 4 роки тому

      @@jpthedio hey John thanks for the link😊
      I have seen this video already but this is the not what am I saying you.

    • @by_gato
      @by_gato 4 роки тому

      You can with custom code.

    • @shubhamparekh9808
      @shubhamparekh9808 4 роки тому

      @@by_gato how?
      Can u explain in detail? Or you have sharing related example.

    • @by_gato
      @by_gato 4 роки тому

      @@shubhamparekh9808 You can check the video channel suggested above, since it also shows you how to display stuff that is saved in Firebase database. I have a programmer that connected my project to Firebase, a little complicated if you don't know coding. At the beginning we used glitch.com did all the configuration there and then pasted a javascript file inside Webflow custom code. Now we are using webpack

  • @asdfghilal
    @asdfghilal Рік тому

    Amazing! Thanks

  • @yuli3873
    @yuli3873 Рік тому +1

    6:07
    15:06
    I love you, haha!

  • @Beritofficial
    @Beritofficial 3 роки тому

    Fun and educational :D

  • @finnthefannibal
    @finnthefannibal 3 роки тому

    The calculus joke got me

  • @LutherDePapier
    @LutherDePapier 2 роки тому

    Do you have/Can you put the Webflow University OST on UA-cam?

  • @H2theU2theG2thH
    @H2theU2theG2thH 3 роки тому

    Question: Can Webflow build dynamic business directory type of websites?

  • @LadanSoodmand
    @LadanSoodmand 3 роки тому

    This is so cool. On my blog, I have a LOT of absolute and relative positioning, and I have been told not to use it often. I'm so stuck on this, and not sure what else to do. It's a 3 column layout blog. Any advice?

  • @fortunebrown9405
    @fortunebrown9405 2 роки тому

    The fixed position sometimes doesn't work on elements,,,when i set some elements to fixed position, they tend to move to the top of the page and scroll out of view,,,i don't know what I'm doing wrong,,please i need assistance

  • @GameMaster-b3n
    @GameMaster-b3n Місяць тому +2

    #verstanden #relativ #position #Disign #floats

  • @jatinkhorawa7215
    @jatinkhorawa7215 3 роки тому

    can we add ::before and ::after pseudo selectors in webflow?

  • @iDATUS
    @iDATUS 4 роки тому

    Finally got it.