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

> But don't you think that is a bug or I should say an omission in spec?

No, the sticky position scheme is not simply a "fixed-like" position scheme for any scrollport. It is something that allows an element to effectively stay in flow, retaining its geometry unless the "intersection" of its containing block and its scroll container allow it to stick to an edge/offset at a certain length. Key here being that it needs room to move within its containing block. And your example doesn't allow any space for it to move within the `body` that is scrolled thousands of pixels out of view by the time any of your sticky elements move into the scrollport. So`720px` is quite definitely a small value here, when your first sticky element is multiple thousands of pixels passed where it would become "unstuck", never actually allowing it to be in a "stuck" state.

This is a feature of sticky. Not a bug or omission.

Please read all the language about boxes and sticky-constraint rectangles in that section, because sticky is not just about vertical scrolling, it doesn't mention `height` specifically, mentions boxes, which encapsulates height and width.

See this demo to understand why it's important for a sticky element to be constrained within the box (height) of it's nearest block level ancestor. Without which, every sticky element could never become "unstuck" at any point, each staying in view and covering each other. Think about how the alphabetical headers are treated in the contacts/phonebook apps like on iOS? https://jsfiddle.net/pbLqjstg/

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

Received on Saturday, 11 May 2019 13:22:27 UTC