You probably want position: sticky instead of fixed
HTML-код
- Опубликовано: 13 июн 2024
- Position fixed and sticky have a lot of similarities, but sticky has a few things it does a lot better and a few things that we just can’t do with fixed, so in this video, I compare the difference between the two and also look at a few fun use cases for sticky.
🔗 Links
✅ Use position sticky to tell a story with CSS: • How to tell an engagin...
✅ Position relative and absolute explained: • CSS Positioning: Posit...
⌚ Timestamps
00:00 - Introduction
00:27 - comparing fixed to sticky
02:29 - sticky is better for headers and navbars
04:14 - sticking to the bottom might not work how you expect
07:35 - A fun use case for sticking to the bottom
09:13 - Headings pushing each other out of the way
12:58 - The mistake people make with position sticky that stops it from working
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Worth mentioning that sticky wont work if *any* parent/ancestor has overflow:hidden (however far up the dom). You can use overflow clip instead, but that rule will not work in Safari or
any iOS. So beware!
But keep up the useful stuff Kevin!
I logged in on RUclips just to say thank you. You are the real MVP.
You can try contain:paint, which might solve the issue if overflow clip doesn’t work. In fact, you can put them together to squeeze as much browser support as you can.
Neither sticky nor fixed work correctly on iOS if an ancestor has overflow:hidden.
Beware! CSS has a bug where, if you use position fixed on an element whose parent container uses the transform property, it will behave like a position absolute relative to the parent container
This is also the case for a position set to sticky
I have been using sticky since I did Conquering Responsive Layouts
I absolutely love how you explain how things work through specific use cases, man.
Immediate applicability of knowledge is king when it comes to learning.
Thank you!
When using the sticky none of your wrappers should have "overflow hidden", but if you need it, you could use this instead of overflow hidden, and this would trick the sticky position
```
.wrapper{
overflow: initial;
overflow-x: clip;
}
```
Thank you very much, Kevin. You rock as usually. One of the practical use cases of what you have so neatly shown is A-Z list where a letter are in the left column and a list of items / descriptions starting from that letter is in the right.
You came with just the right inspiration for what I'm about to start working on now. Clear and helpful as always. Tnx a lot for that
Fantastic like alway, such a source of knowledge and good stuff Kevin!!!! Thank you so much
This was a very nice video. Thanks for sharing, you help us stay up to date!
I really love your use case and explanation. Thank you so much.
position: sticky; bottom: 0; Could be used for a jump to the top type buttons on really long pages.
SO timely, thank you as always.
Thanks so much, never knew I needed this
Great explanation of fixed and stikcy, thank you.
Great video. Thanks again!
Your videos are great, thanks!
Excellent Video👌Thank you.
Another great video. Great use of the "ghostie" class with the emoji class name..
Thanks Kevin, that can be really useful 👍
Thank you for the great explainer on sticky. I have seen examples of a table's headings sticking to the top as the rest of the table scrolls down the page. Is that accomplished using 'position: sticky' or by some other means?
woah thanks kevin, it's always a pain in the a** for me to create a sticky navbar. Now I understand it better
Thank you for this!
that flex fix is the type of details you get that I love about you :)
Superhelpful
Thank-you for clarification, btw love the class "👻"!
Very nice ! thks for all :)
Okay, for the longest time, I thought Kevin was saying "Friend and friends" at the beginning of his videos, and I thought it was slightly odd. But in this video, I realized it was "front-end friends" for the first time. #blessed
a great video from a great developer
wow that is so clear explained
Thanks !
I have been using position fixed for my sidebars and it gets tedious to handle but when i use sticky the layout stays intact and no extra lines are needed .
Hi Kevin! Do you think you could help me? I would like have a h1 which if it takes up two rows it doesn't expand downwards and pushed other content down but instead expands upwards where nothing else exists. So the new second row will be in the same position as if there where only one row.
In resume fixed is like an absolute position because it leaves the flow and sticky is like relative because it stay in the flow obviously each one have his own characteristics
I always add a css class called .debug (border: 2px solid #ff00ff !important) and .debug-bg (background: #ff00ff !important) to my projects for exactly these kind of debugging purposes. Thank you for another great video! :)
Reply
use outline instead of border, outline doesn't increase the size of the element you add it to, and border does!
@@frittex great tip, thanks!
Oh I just improvised the same thing in my last project! It actually added a red dashed line to look more menacing.
And I should have used outline, yes. I didn't.
Nice Video. I think sticky is not related to screen it's related to closest scrollable element. That's why bottom behaves that why as closest scrollable element is body
Yes you are right. according to CSS Positioned Layout Module Level 3 W3C Working Draft: " A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. "
What could one do If they had an inline element within an overflow parent and they want an element inside the inline one that is positioned relative to the inline element but breaking out of the overflow parent of the inline? I tried using position fixed and although it broke out of the parents overflow, shifting its position was making it ignore the inline elements position, do you have any insight on how those circumstances could be overcome without JavaScript?
sticky for navigation bar jumps up while navigating with tab key on the menu items, any help?
Sometimes I have this problem where sticky positioning causes elements to jitter how do I fix this
it was really cool!
Thanks a lot !
👌👌👌👌👌👌👌💥💥💥💥💥
so I went to your codepen and I don't see the header, I am wondering why your sticky fixed that but not mine when I did it :(
even though we CAN use stuff like class="👻". do you really think, this is a good idea?
the hint with the borders/backgrounds is really a life-save that helps me since years. thank you for the recommendation
for personal projects yes
@@goodshiro10 for me: not even there. but that may be a personal preference
@@badtwin82 Yea I forgot to mention it's a personal preference, it can be well used for some grid templates (idk the name exactly)
Awesome
Sticky at the bottom has a problem with the adress bar of mobile browsers which disapear on scrolling.
And why sticky does not need a width: 100%? But fixed need it.
Love you @kevin Sir
please correct mer but does position "override" aligns?
21s - never mind sticky, is that a wee stinky?
Since i started Web development initially i was using Fixed position for headers but as soon as I get to know Position Sticky around 5-6 years ago I always use sticky for my headers. and also on the elements where I need it.
Hey! I'm looking for help. Being more precise i want to find person that making great content as Kevin but about JS or REACT. Would you relate to any of RUclips channels?
Jack Harrington
align-items: start; Thank you!
Kevin casually glosses over that ghost emoji as a class name.
Okay now I feel weird for using position fixed for all those navs+adding extra space to the parent 😂
You used a class with the emoji (👻). No one noticed that except me.🤣🤣🤣🤣
TIL ... I want to use sticky. Thanks!
if you could demo a table with a sticky header you'll have every LoB corporate code monkey praising you
I use stinky.
Can you share how it works? 😉
Even if sticky is working out, after certain scrolls it will stop working. So annoying.
👋
You have placed advertising on the upload. It's a shame as it destroys the learning. Thumbs down. I get very annoying advertising every few mins so unwatchable.
Its how he makes money to be able to teach us mate. If it gets too much for you then ad block but know you are hurting his income. He needs funding... ya can't teach CSS from under a bridge.
Thanks!
Thank you so much!