The Forgotten CSS Position
HTML-код
- Опубликовано: 13 июн 2024
- 🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
Everyone knows how to use relative, absolute, and fixed positioning in CSS, but most people don't even know about the amazing sticky position. Sticky position is a unique hybrid between relative and fixed position and makes creating elements that only act liked fixed elements after they are scrolled to a certain point incredibly easy. This used to be something that could only be accomplished in JavaScript, but sticky position makes it possible in CSS, and is much better for web performance.
CodePen For Sticky Header:
codepen.io/WebDevSimplified/p...
CodePen For Sticky List Headers:
codepen.io/WebDevSimplified/p...
Twitter:
/ devsimplified
GitHub:
github.com/WebDevSimplified
CodePen:
codepen.io/WebDevSimplified
#CSSTips #WebDevelopment #Programming
Just a note on why I used @supports at the end of the video. If a browser does not support position: sticky it will fallback to position: static instead of position: relative which will make any absolute positioned elements inside the sticky positioned element no longer work properly.
Why do you hide codes😡??
Simple, Precise and to the point ✌🏻
Although this video is like 3 years old, it helped me a lot. I was in a desperate moment on how to make my navbar fixed but somehow still relatively positioned according to other elements. The first example in this video is EXACTLY what I was looking for for the past one week. Thank you very much!!
just learning html and this vid was godsent. I hope everyone starting out can watch your videos
I'm really glad I could help!
literally everything is godsent
Such a good series!!! Thank you for your hard work!
Great explanations, and the details of how sticky works! Thanks for the comprehensive video.
Great tutorials. Well explained and going straight away to the point.
Thanks for the explanation,, it was great! I was so confused until now.
Thank you so much for this. I've been struggling to do this in JavaScript. This is simple yet super helpful. You saved me. Thank you so much.
This is super cool, and much simpler than I thought it would be. This channel is gold for a noob like me. Thank you for your videos!
This is the best description and instructions on how to use Sticky Position in almost all browsers I have seen.
Thank you for this video. I've been learning nav bars and I had the same problem you talked about when using Fixed, where the elements below the navbar get bumped up. I didn't know if this is how people were doing it, but I used Fixed because I only know about Fixed+Relative+Absolute. Now, I know to use Sticky, instead. 👍
Sticky is so much nicer to work with than fixed. I hate having to add margins to my content when using fixed because it just doesn't seem right. Just make sure that you check to see if the browser supports sticky position using @supports because it isn't supported in all browsers yet.
For sure; that's probably one of the reasons I hadn't heard of it before (even though 90% browser support with prefixes sounds pretty good. IMO). BTW, have you done a video on an image slideshow w/ autoplay + pause + left / right arrows? I'm gonna check right now, but figure I'd include it in this comment instead of messaging you twice.
Yeh 90% really is pretty good. I thought it was around 80 for some reason. As for the image slider, I have not done a video on that topic but there are tons of videos about that so you should be able to find a good one.
thank you for this video, it's really clarified some unknowns for me
Super helpful, incredibly simple and easy to understand.
Brilliant, love the sticky list headers. I will be using this method next time someone wants a sticky bar, instead of having to mess around with JS!
I really do like these short, digestable videos where possible.
Thank you so much for this wonderful tutorial it helps a lot
Thank you for this video. It’s really precisely helpful
Thank you very much for providing these videos!
Best example how and why to use sticky! Great stuff!
The example you have provided is extremely useful for teaching this concept, awesome
Full of awesomeness. You are a great tutor. Bless You.
Thanks mate; I only knew how to do stiky on excel, now html. I am using that on my current mid term project.
Great explanation of position: sticky! I really like your CSS content!
Thanks! I love CSS.
You're really a fantastic teacher. Keep it up!
dude your contents are forever. great job
really recommend this channel. he did extraordinary works!
Clear Explanation !! Thanks a lot
Vert informative video to understand sticky position. Well done.
Thanks a lot. Love your videos.
Great explaination!
Thank you so much, this video made my day ❤️
One best sticky simple video I searched lot I got this is the best
Short, concise videos are the best!
Thanks brother, you helped me!
Great, very practical video, keep them coming!
Will do. Thanks for the feedback!
Finally, I've understood the concept of sticky position.
My warmest thanks ❤❤
super useful - I was doing this for years using javascript :) ...
Great video! Thanks.
So well explained
thanks a lot, now I know what is @supports used for, explain more such CSS tips.
Very well explained. Thank you!
You're welcome.
What a precise explanation !
A thousand thanks to you Web Dev Simplified :)
You are very welcome x1000.
Great content.
Thanks
Great .. easy.. awesome explanation :)
Great vid man , subed
Thanks again buddy👍
Really u r super 👍., No words to say ur teaching., Keep rocking bro 👍
I have found yet another genius. Thanks for this content and many others that have helped me understand some #WebDevelopment concepts better.
You're welcome! I am glad I could help.
Thankyou very much .
Thanks a lot sir ❤
Beautiful n clean
very useful thanks
Excellent video! Thanks for posting! Can this be used to make items stick on the left too? I'm thinking of spreadsheet-style columns that stay on the left as you scroll across.
Surely I enjoyed very much.❤
Thank you so much
its a great explanation of position:sticky. Thanks
DO you know any resources/templates for practice to become a professional web designer
nice
didactic, thank you!!!
Simple and clean
I would like to repeat the same thing as @TechUchiha said "Simple, Precise and to the point" 👍. Great Job, Keep it up :)
I am not from the coding background but this made me very clear regarding my doubt. Thanks!
Thank you so much!
You are very welcome!
Really helpful
Absolutely gold
Thanks!
nice video...glad to see it😄 ... now i know more about sticky position. thank you kyle✌
Thanks for giving me the idea for the video!
@@WebDevSimplified no problem... I will wait for the next video😁
@@parasarora5869 it will be out in just over 24 hours.
@@WebDevSimplifiedI will definitely see that...thanks for info😄
you've save my life.
Thank you
i didnt know about @support :+1 for it!
Obrigado amigo, ajudou muito.
Ganhou mais um inscrito.
What about thank him in his language?
@@ed1nh0 😂😂😂
Thanks :D
Please make a video for display elements.
thank you
Very useful
Position: sticky look professional the way you have the header and then the navbar. I enjoyed this video.
Thx bhai
Can I use this sticky position on a tag?
Great tutorial! You might want to include the word "sticky" in the video title for SEO purposes :)
Thanks for the feedback. I was trying something different with the title and thumbnail to see how it works. I'm always trying to experiment to find the best way to do things.
thanks
best ! you are the best !
Hello Kyle, can you make a video on xpath with html, css and javascript demo project? Thanks
Always the best
🎉 game changer !
How did the image appeared in the heading just by adding the
Question: Why do you use the style tag instead of a separate CSS file? Wouldn't that violate separation of concerns? Is it more for tutorial sake so that you aren't flipping between files constantly while explaining and demonstrating your examples? (Which would make sense if that were the case)
You're the truth 👍
How do you stop this from bleeding into your footer? (ie. part of a sidebar?)
You're the G.O.A.T!
how .header-large gave that image in the body even if the div isn't styled in css or style
Lol....I used to use JavaScript for this simple stuff thanks very much for sharing
cool good job buddy
When I am using position: sticky element stack up on each other and then, I am using background-color: transparent last one is visible. But in the video he said " it no longer remain fixed".
1:43 Where this image come from though ?
You said that sticky falls back to relative when not supported by the browser so then why to we need to use that @support part when it will automatically become relative anyways if not supported by the browser ?
This is because by default elements are static position so if it falls back to relative position you could get some weird bugs where the top/left/right/bottom values you specify on the element cause it to perform strangely in non-supported browsers.
the best teacher ever
Can we use js in case which sticky is not supported ?
god that was great!
Wow, was about to use JQuery for this simple task as I'm noob. But this saved me.
Oh, that's what I hated about web dev -- browser support headache!
Btw, what IDE are you using? Is it VS Code?
Excellent explanation. Thanks.
{2021-05-28 09:56}