 Hello and welcome to the CSS podcast! This season we're answering your most burning CSS questions and today we're covering something that you may have run into, which is the question of why isn't my element stuck where I want it to stick? It's fairly common for folks to be confused when implementing sticky elements, at which point they find themselves in a sticky situation. And it can be frustrating when either the sticky element isn't being sticky at all or is sticking in a way that you didn't want it to. I'm excited to say sticky a lot this episode, that's going to be fun. A sticky element? Sticky, sticky, sticky. Sticky, sticky, sticky, sticky. Anyway, okay, I've got it out of my system. Ready? If you don't know, a sticky element is unique in that it can switch between being relative and fixed. The sticky element observes either the containing block or its nearest scroll port slash scrollable parent. And the part that tricks people is the nearest scroll port, usually. But it can also be the containing block portion. So we're going to cover that today. To help illuminate this, here's a few common scenarios and their workarounds to help paint the picture of the issue, the why, and the way to unstick yourself from the situation. Unstick yourself. I like all the sticky puns. Also, a nice catch up episode is number 43 on containment, which gets a little bit more in depth. It gets a little bit more in depth on what a containing block is, which is pretty important concept. So definitely check out episode number 43. Nice. And like always in these burning CSS question episodes, we'll orient the conversations around a few sticky scenarios, why they're happening, and ways to get out. 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 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 itself. I put position sticky but didn't put top. I think that people also don't realize this because we talk about this a lot with position absolute inside of a relatively positioned element. 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. Okay, this next one I think is the most common cause of sticky woes. And that's when an unexpected parent element or maybe it is expected, I don't know. Anyway, it has overflow hidden or scroll or auto. So and it's stealing the containing block away from the one that you actually want to. So this is when it's not like it's not sticking. This is when you're getting it stuck in the wrong spot. And this particular stinker, the sticky stinker, even applies for overflow X. So like let's say you have some parent, it's got overflow X not overflow Y and you're trying to be sticky on the vertical scroll. It still will make the Y element stick to it because it's a containing block. And now it's containing stuff. And so that's where the observable edge is going to be is in that one, that space. So one workaround for this is you can set display initial on the unwanted containing block parent since inline elements can't have overflow set. But this might not be an option. Plus it also seems kind of weird to set display initial on something that's being a troublemaker. It probably had overflow set to something on purpose or display grid on purpose. Or you can change the DOM structure so that pesky parent isn't involved anymore. You can also set overflow to initial or unset and sort of like take away the overflow if that's an option. But yeah. Yeah, that's a good call because I agree like you could run into that and not realize they're connected and they might be. So another cause of an element not sticking is something that you also might not be expecting. And that's if the parent element is flex or grid and is stretching that sticky element to fill the space. So this means that for the element that you want to stick its block size is so tall because it's stretched that it actually is stuck but it doesn't look like it. It might not be behaving like you want it to but it's sticking. It's just stretched. So potential workaround is to set align self start or end depending on where you want to stick or set align content on the flex or grid parent to you're still aligning the element but you're just doing it in a different way either align content or on the element itself you could do align self. So two different ways to do the same thing. Yeah, this one was surprising to me on Stack Overflow how often it came up that people had grid or flex stretching their children so they weren't there. It had never happened to me. Because you don't see it right away if it's not like taking up that full height. I mean depends on how you set up your element but yeah. Another sneaky one from Stack Overflow that hadn't happened to me but I could totally imagine it happening if I'm using something like container queries is there's no height on the parent container. So the thing that you're trying to scroll within that you want to stick to it has no height which means there's no distance between the scroll area and the sticky element and so there's nowhere to stick because there's no scroll one runway. It's like already stuck inside of the zero height container. Another one from Stack Overflow I was like wow that's a I never heard of that but here's multiple people getting stuck on this with position sticky so. Getting stuck on it. It's funny because I feel like this is the opposite of the previous one but in both you're you're you're sticking but you're just not moving anywhere. There's no space to move around in. So that is there's so many things that you need to consider when you're applying sticky. So lastly another common issue with sticky is DOM order. So this can be tricky too as you need to nest elements appropriately to get the effect you want. So you want to make sure the elements that you want to stick at the top are first and elements that you want to stick at the bottom are last and in the show notes we're going to link three different demos. Each of them have different sticky effects and they each slightly adjust their DOM markup to make sure that the position sticky is working. So check those out for more details and to actually try out some of the results this could help get you unstuck if you're running in some sticky situations. Oh nice. All right key takeaways of this sticky stuck episode is the order of your HTML matters. This is one of the things that affects for me personally the most whether it's for containing blocks. So maybe you want to move the sticky element out of the containing block that's the offender or just so that you get the sticky effect you want you'll see that in the three demos that changing the DOM order changes the way that the sticky elements either overlap or push each other out of the way or whatever it is that they do. So order of your HTML is a big factor here. Yes also the presence of a containing block whether you have one or not also matters for your sticky elements. Apparently ensure the correct sizing of your scrollport and the elements so maybe your element is the same size of your scrollport or it's bigger than your scrollport or your scrollport is zero or your containing block is zero or something's happening and it's messing it up and check the sizing of those elements. And as a little bonus sticky elements usually only need a z-index of one so you don't have to worry about adding like a z-index of like 999999 to the sticky elements. There's nothing else to compete with in terms of the z-index stacking for the sticky elements. Unless you have other elements in that sticky so of course that's like an asterisk but for the whole sticky element itself usually need z-index of one. Yeah on Stack Overflow it's so funny all the answers were like oh just here's how you do it and they like show like here's the code to get the sticky effect you want and then the z-index was always wild. I'm like what is with these random wild z-index choices? Anyway it's kind of funny too. Generally you probably don't need z-index more than like three so if you have anything harder than that it might be worth taking a look into why. We do have a whole episode also on z-index. I don't don't know which episode number it is I'll have to look but we've got some z-index tips in there which talk about other things like containing block also I believe in that episode and why z-index may not be working so check that out. If you're setting z-index in 999 please please listen to that episode. All right that's all we've got for you today thank you again for joining us. Yeah if you have any css questions we'd love to answer them on the show please tweet us with the hashtag csspodcast. I am at yuna on twitter that's at una. I'm at argileink on x and twitter and blue sky and stuff like that and ask this question. x and twitter. Yeah your question could help a lot of people we'd love to hear it. And if you like this episode please give us a review on whatever podcast app you're using or share this podcast with a friend those reviews help other people find our show which means that we can spend more time unsticking sticky situations for you. Thanks y'all we're looking forward to your questions. To have a throw a few more in there. That was great. We'll see you next time.