Main

The easiest mistake to make in sticky elements #shorts

Link to podcast → https://goo.gle/3G1yzAn Catch more episodes → https://goo.gle/CSSpodcast Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #CSSpodcast #ChromeForDevelopers

Chrome for Developers

3 months ago

the easiest mistake to make in sticky elements is that you just forgot to specify the inset or something like top left right and bottom so without it you run into the same issue that you might run into uh when you need position relative the element has no sticky Target offset to observe and actually stick to so it'll sit in the flow of the Dom as it would by default so you can fix this by just making sure that you have an inset specified that's the first thing to check shakes fist it self ah I p
ut position sticky but didn't put top ah I think that people also don't realize this cuz we talk about this a lot with like positioned absolute inside of a relatively positioned element you know that's something that we come up against a lot but I think sticky is just used a little bit less often and so people don't realize that you still have to apply your positioning when you are using sticky yeah sticky it's still fun to say

Comments

@nwsome

The second one is 'overflow: hidden' on some ancestor

@vitorfigueiredomarques2004

This is kind of confusing, position sticky should assume there is a top: 0 by default if no top property is set. But now it is is too late hahahaha

@r-i-ch

Demo?

@AleksandarPopovic

Look little where you position speech to text? Behind @ChromeDevs...