Sticky position

Question

why am i getting a margin on top if i set margin:0 for everything?
Also, when I set the position to fixed it looks like it is set to inline-block. Why?

https://sololearn.com/compiler-playground/Wn0pFS1lH9BP/?ref=app

I wrote hello a few time to see the sticky effect better.

Answer 1

When you use "sticky", it appears inline and scrolls until it hits the boundary and stops there. The boundary set by "top".

When you set it to "fixed", it starts directly at that boundary and doesn't scroll at all.

As for the "pre" vs "#pre". I don't recall seeing "#pre" in your CSS before. It's working now, so it appears you fixed it.

Just a tip, I would not set the ID to a reserved word/TAG NAME as it can be confusing. Give the ID something meaningful. That is likely how you got confused. :)

And just to be clear -- I'm not a CSS genius. So I reserve the right to be wrong, ignorant, or just plain stupid. haha

Answer 2

Zvi
fixed, like absolute, takes the element out if the normal static positioning hierarchy.

Meaning, fixed or absolute positioned elements does not leave a gap in the page where it would normally have been located.

It's not acting like inline-block when you change the display to fixed. The other DOM elements is just behaving like it doesn't exist.

sticky does not take the element out of the positioning hierarachy. It is positioned like display:relative; until the page is scrolled.

And as Jerry Hobby said, the extra space at the top of your fixed header is caused by the top:25px; you added to the header. top in sticky serves as a stop value on how far the sticky element goes when scrolled.

Also ++ for Jerry's suggestion of avoiding id names the same as tagnames. It's confusing and potentially problematic when you add javascript later.

Answer 3

Your content is in a PRE tag. Add this to your CSS:

pre {
margin: 0;
}

Answer 4

Jerry Hobby Wow! I had it set to #pre not pre. Why is there a difference considering that i set the id to pre?

Answer 5

And can you figure out why when i change the position of #header from sticky to fixed it suddenly becomes inline block?

Answer 6

Zvi
ok, the extra space between #header and #bottom is tricky to remove...
add this css reset:

*{
margin: 0;
padding:0;
box-sizing:border-box;
}