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

Zvi
fixed, like absolute, takes the element out of 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 are 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. Then it goes up until it hits the top value you set for it.

That's why you have the white gap behind the #header. It would be the space that your element should be.

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 2

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 3

Zvi
ok, the extra space between #header and #bottom is tricky to remove... there is a way to make it smaller so it doesn't peek out

add this css reset at the top of your css tab:

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

maybe this is what you were after?
https://sololearn.com/compiler-playground/WofD8a3bSYyI/?ref=app

Answer 4

Bob_Li yes thanks I put in top:20 because that’s what chatgpt told me. Now I understand better what’s going on you’re solution is what i want! Thanks.

Answer 5

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

pre {
margin: 0;
}

Answer 6

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 7

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

Answer 8

Hello

Answer 9

Hello

Answer 10

How to add background img in css

Answer 11

Hey

Answer 12

please help me to make a website

Answer 13

I want bag program use in side php and data base ,html

Answer 14

merry thanks for the detailed answer. But explaining the problems is only half the job, now tell me what to do about!