positioning confusion

hello, while making this landing page , i have to fix the header using fixed position property. while doing so the elements i write after that header appears below of it also takes the place of that header (which makes sense) in normal document flow. but to be able to make this landing page complete i have to apply paddings and margins at top .is it the right way?
No description
11 Replies
coffee
coffee12mo ago
Try position: sticky; instead of fixed and you can also add top: 0 or actually, play around with the top lol i don't remember if it has to be the height of the header or not, but i think top: 0 should do the trick
siuuu
siuuuOP12mo ago
i have done top 0 and width 100% of the header
coffee
coffee12mo ago
cool, so do position: sticky
siuuu
siuuuOP12mo ago
sticky does the same job? ?
coffee
coffee12mo ago
sticky does the same job without taking the element out of the flow of the html this means that the elements below the header will still know that the header is there and when you start scrolling, and you get to the amount of pixels specified in the top property, that's when the other stuff starts going underneath the header
siuuu
siuuuOP12mo ago
oh i have only used fixed before so i didnt know this
coffee
coffee12mo ago
well, we learn something new everyday :D (hopefully lol)
siuuu
siuuuOP12mo ago
top 0 and width 100% will do it ig
coffee
coffee12mo ago
great 👍
siuuu
siuuuOP12mo ago
thanks bro
coffee
coffee12mo ago
no problem
Want results from more Discord servers?
Add your server