Header position question

So i want to create a header like here https://codepen.io/freeCodeCamp/full/YqLyXB , and i kind of did, but im not sure how am i supposed to make it stay at the top at all times. I googled it and i got this position thing so now i cant choose between fixed and sticky, can someone explain me the difference? I guess theres a problem with fixed because it can make ur header collapse onto the other parts but u can avoid it by setting height

I hope this helps with your question.


it does, thank u sir.

so its basically like fixed that is not fixed for the whole page, but only for some part of it, right?

position: sticky works with a page offset.

For example, if applied to a div, with a top offset, the div element will scroll along with the page normally, until it hits the top offset position, and then it will “stick” to that specific position. The effectt is the rest of your page elements scrolls by, while this div is “stuck” at that offset position.

Something like that, I see it like “the way that the element is interacting with the rest of the elements”, I’m thinking that position in CSS is about how the elements interact between them.

This post has some examples that I’m sure will help you to understand when using sticky or fix.