PH: Danny Meneses from Pexels. If you just started learning HTML/CSS, you can easily get caught by the outstanding improvements that we get every day, like flexbox or grid... or a framework why not. But, even if you learned how to put 1 or 2 rules and already using bootstrap, to name a popular one is good to know how things work. Today, taking my daily walk down memory lane, I remembered the first HTML task I built using... bootstrap and how, in my precarious knowledge, position sticky saved me. I will not stop on position static, relative, fixed, and absolute. For this article's purpose, it will be harder for me not to make myself a rabbit hole and start talking too much about , among other concepts that entirely make these rules, and in the end, defines how everything looks. stacking context (still worth a small appearance) Position Sticky This position will mutate between and properties, considering where your viewport is right now. relative fixed { : sticky; : ;
} .sticky position top 50px When you apply sticky, two things are happening. The normal flow of the document slightly changes since now this element will not be static, and therefore new rules like the one you see top:50px; can be applied and tell the DOM where o to render it. when The intriguing part of sticky is that " " That is pretty much what is doing. When you start scrolling and get to get to that 50px. The element will switch to fixed right in that place. mutate between relative and fixed. Let's see an example. fiddle Now I encourage you to go to the fiddle and add to the empty class. position: relative; .relative What you will see in any case is the text suddenly overlapping the navbar. Z-index index ft. Stacking Context Sometimes because of this, these kinds of problems appear, and you can patch it with Z-index. Stacking Context, is the three-dimensional conceptualization of HTML that it traduces to "What will it render first?". If things are position in the same place, whatever is rendering last is what you will see. And this goes hand in hand with Z-index in the case that you don't know, will let you position your element on this conceptualization. The stacking context will usually change every time you are not using a "static element" in one or another way. Having this little crumble of knowledge, we can deduce that this happens with position relative, and that is why we are having a problem. { : ; : - ;
} /* Cheap / Quick solution */ .z-index /* To"go up" */ z-index 100 /* To "go down" */ z-index 100 Or you know, use position static if that will work for your case. Alright, let's break more stuff. The Family Problem We are going to start with this If it were not for the height of the header, it would appear to be the same. fiddle . Go ahead and move the navbar inside the header. If you do, you will see this. Our navbar is going anywhere outside of that header. Sticky will only "stick" to its container block, and only if this one is a scrolling-container. The navbar is indeed sticking to the header, and that is why the text stills moves. After his nearest scrolling ancestor that happens to be containing it ends, so will the " " flip and change back to relative. fixed switch Of course, every other element inside his container that has a static position or z-index lesser than this sticky element will completely ignore his presence. We will get the overlap effect if they are fighting for the same place that we might be expecting. If you were wondering what I had to do on that task, was this I remember my solution went more or less as you can see on there. fiddle . To conclude If you are a beginner with programming, it may be daunting to read the official documentation for answers but, if the documentation is good enough, you'll have everything you need. These will not be the case for every documentation you read. I had awful experiences. is not the case. This one

Flow

Read My Stories

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

How CSS Position Sticky Really Works: Tips For Beginners

Too Long; Didn't Read

Coin Mentioned

@Figle71

RELATED STORIES