Re: [csswg-drafts] [css-position][css-sticky] Position: sticky doesn't work when it has several HTMLElements with margin before it (#3923)

Ah, yeah, this is an odd intersection of some features.

The stickypos's parent (and containing block) is `body`, which is fixed to 720px; its content then overflows (and is caught by the `html` element being scrollable by default). As @jonjohnjohnson said, stickypos won't "stick" an element past the bounds of its containing block; since the CB is a 720px-tall rectangle at the top of the document, and the fixpos element is far below that, already outside the bounds, it won't move any further due to stickiness.

That's why you're seeing it stick if there's nothing preceding it - if the stickypos element starts out within the 720px-tall `body`'s bounds, then it'll be allowed to stick *a little bit* (moving about 400px down, until it hits the bottom of the `body` element). But if you scroll further than that, it gets caught and scrolls up, trapped by the `body` element's bounds.

If you remove the `height:720px` from `body`, allowing it to grow to contain all its contents, it'll work as you expect, and the sticky bits will stick all the way down. Alternately, as @Loirooriol said, you can force the `body` to be a scroll container, by explicitly setting both `html` and `body` to `overflow: scroll;`; that has some unfortunate additional effects, however.

Since I don't understand why the `height: 720px` is there in the first place (it doesn't seem to have any visual effect on the page), I'm closing this issue as Working As Intended.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3923#issuecomment-627545390 using your GitHub account

Received on Tuesday, 12 May 2020 19:27:48 UTC