PH: Hitarth Jadhav from Pexels If you just started learning CSS, these days it’s quite easy to get caught up in the life improvements that every year comes to our hands. To ease our work as much as they can leaving room for us to concentrate on design/story/content placement and whatnots. Don’t even get me started on frameworks. “I don’t need to know how flexbox and grid works, because bootstrap uses it for me!” Oh... ok. Quick look at position This is the default position. Nothing special about this one. The element will just be positioned with the of the HTML. position: static; flow Position relative works in pretty much expected behavior. It’s relative to itself. As soon as something is relative, when you set top, bottom, left or right property, the element will be offsetting x units from the used direction. Down here we see two boxes with left: 100px from their original position. position: relative ; CLICK ME TO SEE SOME CODE Position absolute works in a very similar way. The only thing that changes, the element will move. With absolute, the element will ignore the complete flow of the document, and move position: absolute ; is in relation to what in relation to the next parent container with a non-static position. Here we’ll see two elements. One is inside a relative container, with Whether as our other box, will ignore this container since , and we’ll go all the way to top: 0 of it’s next non-static container. And if he doesn’t find one, it will reach the top of the HTML document bottom: 0 and left: 45%. it’s his sibling CLICK ME TO SEE SOME CODE : Position fixed, works in a similar way than absolute. It has two main differences. The element will position in relation to the . And will stay fixed there, through the whole document. Here we will see one element fixed to the top (top: 0) and the other one will just be hanging at right: 0, top: 0, with position absolute. position fixed; viewport CLICK ME TO SEE SOME CODE And we have one missing… PH: https://www.pexels.com/es-es/@pixabay position: sticky; Ok, so it’s not that complicated. It doesn’t require a whole section inside the article. I’m just a drama queen. Sticky has properties similar to fixed. Will “ ”(yes but not really, please bear with me), you will set a specific position, and it will get fixed there. And I don’t even have to make an example for that, just go the fiddle, look for our fixed box and change the fixed property, for sticky. There you go! nothing different right? go over the flow of the document position fixed Well, the only difference would be if you do something like this. JUST CLICK IT ALREADY Basically, what’s happening is that every box with sticky property will behave as a element. relative As long as viewport does not get to define offset. { : sticky; : ; } .sticky-top-0 position top 0 In this case, when we have 0 pixels offset to the top of viewport (aka, when user scrolls down, and viewport top is 0px away from our element), sticky will start behaving like “ ” element. But, . In the end, it’s not fixed, it’s sticky. fixed not quite There are a few limits and definitions that make this behavior slightly different, and will also give you way more power over sticky to write a few cool tricks if you are more creative than me. The family element A very important aspect of this property is the parent and sibling elements. If you pay attention closely, our sticky element will go all the way he can go, inside its container. But then, when its container ends, , waiting for that viewport to pick him up. he stops, and just sits there This happens because the sticky property will only take place . And will only work, . But, as soon as this sticky element meets something that suddenly, it’s not a sibling, it has to respect the original flow of the document again, . In other words, sticky: off. inside the element parent container against their sibling and won’t be able to overlap it This is important to understand and to actually gain more power over this simple property, and make more cool stuff that just “a navbar that wasn’t on top: 0 at the beginning”. One more thing regarding siblings, if you set a siblings as sticky as well, then keep in mind that no sticky element will stop, and they will just stack above each other. If you are doing this, remember to set a background color for those elements! The z-index element. This is a tricky one. Usually, if you read information of position sticky on docs, you won’t find this annoying detail. And that is because is not a position: sticky thing, but just how (and this also). visual formatting works link To put it short, if you suddenly place a sibling element as non-static, and this element comes after the sticky one, your sticky . And here is where z-index comes into place. will go under this non-static element { : int_number } z-index-syntax z-index And just in case you don’t know how that works, don’t feel like reading that doc or open a new tab, most negative values will draw first, then positive numbers (least positive first). So, for example, if we have this code < = > div class "container" < = > div class "sticky" </ > div < = > div class "relative" </ > div </ > div You’ll have this issue. And will need to change the z-index property of your sticky element, Like 100, or whatever number fits your current layout, if you’ve been playing with z-index before. to a positive value. PH: Ylanite Koppens from Pexels Creativity time Well now is up to you! But this tool is much more powerful than you would think at first. Mix something like this HEY PST, WANNA SEE SOME CODE? With tools like grid, flexbox or even a… f r a m e w o r k to get some cool responsive layouts, without even thinking of using javascript or something else than CSS + HTML! Think about the possibilities. A foot bar that will go all the way up once you reach there? You can do that! And how about… eh… ( ). a navbar that doesn’t start on top: 0 I’m sorry imagination doesn’t run through my family And basically, that’s , and . You do need to keep in mind, that old browsers do not support this property, but overall most of what we use today run it just fine. almost everything that can go wrong almost everything you need to know to make it right I hope that my experience had helped you, or at least gave you a hint to where to start looking to fix that bug. :) Read more about positions! If you want to read about some cool stuff, have you ever thought of checking out animations with CSS? see what you can do with them!
