How to Webflow: CSS Position explained

Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co

[@dominicmcmahon4798]

As a graphic designer hitting webflow I could kiss your lovely head for this fantastic video and it's explanations. Please more like this. Much appreciated 👍

[@congruihu2113]

What a release to watch you as a pro experience that "should be working" moment. Thanks for the great content!

[@alejandromedina1019]

Thank you for this, just a minute in and the knowledge is great.

[@MichaelHolzgruber]

Thank you, great video. The "sticky" part at the end made my day, so funny :-)

[@DavidWangstoryteller]

Halfway through - great job!

[@josephgraham6098]

Your channel, and this video series in particular, is INCREDIBLY effective. Webflow has a high learning curve, but as a graphic designer who LOVES web design, these vids are boiling it down to the most basic and critical information. All the tricks can come later. THANK YOU 1000 times. Coffees coming to you soon...after quarantine lol

[@noirvision1152]

Great! Thanks for the clarification. Now I feel more confident in Webflow.

[@dsa_telugu]

great! loved the video... Especially the sticky Alignment part 😉😉 ... One thing I got to know that very small elements can cause big hectics. In this video it's Strech Alignment

[@ugoangeletti3556]

Fantastic video! Just started to get into Webflow and I absolutely love it! I was skeptical to migrate to Wordpress but thanks to your videos, the migration is well worth it.

[@pixelgeek]

thanks for watching 😁glad the videos are helping

[@MoritzFischer]

Best explanation video I have seen explaining the CSS positions! Thank you!

[@pixelgeek]

Glad it was helpful!

[@pixelgeek]

oh and also, thanks for the coffees!! :D

[@floraflora59]

Thanks! I love your video!

[@uncleanAlibertine1]

O after a my frustrationas a newbie I found this! thank you! and put that kind of video even if you don't figure it out right on time, it's so much relatible to me to watch this! thank u!

[@pixelgeek]

I'm so glad!

[@TheBarcher16]

Best explanation I've seen on this. Thanks very much good sir!

[@pixelgeek]

Glad it was helpful!

[@JonnyW.]

Excellent info bro. Thank you

[@pixelgeek]

Glad it was helpful!

[@cassiast]

you're now, my officially Webflow's teacher! Congrats haha It's nice to see when something doesn't work and you just keep the video rolling and don't hide anything!! Also, I have one question, there's any rule or recommendation to use the positions? like, you just said, don't use Fixed for Ads.

[@pixelgeek]

Thanks for watching 😁🙇🏽‍♂️. I'm glad the videos have helped you. As for your question, it's all about the user experience. If you want to annoy the user, then yes use position fixed to make the ads follow the users. But doing that doesn't make the web beautiful 😉

[@Scott_C]

Fixed is often used for navigation elements, but that's about all it should be used for.

[@markusk7738]

Perfectly explained. Thank you and greetings from Germany : )

[@pixelgeek]

You are welcome!

[@alexismootoo9968]

Stop saying "as best i can". YOU are doing a GREAAAAT JOB! Thanks for the help!

[@pixelgeek]

😅I'm just being humble and honest because I know I'm not the best teacher or have all the answers. But people, like you, that are saying they are getting value from my videos makes me happy. Thanks for watching! 🙇🏽‍♂️

[@novanoskillz4151]

great video.. very detailed explanations.

[@pixelgeek]

Glad you think so!

[@alexismootoo9968]

Greaaaaaat video!!!! Nice work!!!

[@pixelgeek]

Thank you! Cheers!

[@heechung6377]

i love these... Thank you so much!!

[@pixelgeek]

You are so welcome!

[@carlosrosalesrojas6788]

Thank you for the time you took on doing this vid

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@victorochieng3743]

Thank you 👍👍

[@AntonyNorthcutt]

Soooo good Nelson, more goodness to add to my arsenal :)

[@alinurislam-gc2yl]

Love you brother it was amazing class

[@wilhelmusolejr4979]

Thank you!

[@shrimpflea]

Excellent video. IMO your tutorials are better than the Webflow ones. Straight to the point, no silly joking around.

[@ElBeeEss]

Fab, Nelson, thank you! The swanky official Webflow tutorial was goood, but I needed this for super-clarification! Like Cassia said, it's really reassuring and useful to watch things not work as expected and see you work out the issue. Because sometimes I get freaked out and think I've broken the internet! :o)

[@danielndrssn]

Thank you! Love and need these kinds of guides. Webflow uni moves a bit too fast for me

[@kaskas55]

peru! Thank you!

[@c.pop.echo.28]

thank you ! now I understand so much better position absolute; In the past I was trying to use that crosshair under position to actually select it's relative :)) and it never worked.

[@derartas]

man ure a legend

[@amcds2867]

I appreciate your video, however just a quick correction: an element with position: fixed is positioned relative to the viewport (not the body), which means it always stays in the same place even if the page is scrolled.

[@willemfeltzer]

thank you

[@pixelgeek]

My pleasure

[@prathameshharder2252]

Thanks a lot...

[@pixelgeek]

My pleasure 😁👍 did you join the community? pixelgeek.community

[@paull6391]

Great video. Been struggling building an upvote system in webflow, have you ever covered that in any of your videos ? Maybe it’s in one of your longer streams ? Thanks

[@JavinTowers]

hey, check this out kzbin.info/www/bejne/i6a0lmSkm6yXY9U&feature=emb_logo

[@hal-zeitlin]

You rock

[@Lan_MLBB]

my dear friend, please shoot one video where you show how to integrate complex JavaScript. At your discretion, any complex animation, the main thing please explain the technology. For example from CodePen. there is css, html, js. And I don’t understand how and what to embed in webflow. I would be infinitely grateful

[@Red_Rebel]

Wow that makes sense lol I thought the sidebar reads like the layer panels from photoshop

[@roter13]

I'm having so much trouble with the positioning of buttons that I made in Webflow. How do I make it responsive. I'm pulling my hair trying to figure out how to make it responsive as the window sizes change.

[@bharatchaudhary664]

hey can you please make a video when to use these positions.

[@pixelgeek]

not sure how to answer that. you use positions when you need to. it all depends on your layout.

[@nataliavlis6689]

yeah, now I understand all this "kitchen" about parents, their children and sticky dinosaurs

[@pixelgeek]

glad the video helped you understand this concept :)

[@IszyIzzy]

So long story short, if a child positioning is not working (misbehaving), it needs a parent (relative). haha! dont abandon ur child. Great tutorial

[@pixelgeek]

You got it 😁👍

[@bailey6759]

I hate to be critical because your videos are still helpful. But its confusing when you refer to things as "this" or "that" Instead, it would be more clear if you say, "the blue rectangle" for example. Thanks

[@pixelgeek]

thanks so much for the honest feedback. I'll take that knowledge and use it for my future videos. 🙇🏽‍♂️♥

[@tonys490]

this is confusing ! could you explain this with a usecase as in with with a real life example of positioning on a website rather than these boxes ....

[@backpacker57]

...and in my case, the boxes made it much clearer for me. He made a lot of mistakes that made it somewhat confusing, but in the end, I think I learned more from the boxes than any other video.

[@ozordiprince9405]

Wait hold up, don't you work for Webflow now man?

[@pixelgeek]

I've been working for Webflow since 2015