[css-position] Sticky spacing #4520
Description
The Scene
I've discovered that I can get different sticky results with the same CSS and different DOM.
Default Sticky Stack behavior:
vs
Sticky Slide behavior:
The Problem
Each of these demos is using a <dl> to get the job done, but one has a single <dl> and the other has many. In order to achieve the (arguably more native competitive style) sticky behavior, I have to break the semantics of my content.
Potential Solution
The children need a way to specify their spacing relationship to the other sticky items. The web has traditionally done this with margins, so what if we added to the sticky margins to the spec. This would be similar to scroll margins/padding, would follow new logical property syntax, and ultimately allow the first demo to achieve the look of the 2nd demo with a little bit of added CSS.
dl > dt {
position: sticky;
top: 0;
sticky-margin-block: 1rem;
}The styles above specify that the sticky <dt>'s children should have space between them, so when they come near each other, the space should be maintained, and one element get's pushed/pulled out/in by the other. They compete for the space instead of share it.
Conclusion
Current sticky behavior can be super desirable, and has been very convenient for many of my use cases. But this one scenario has been tricky, because changing my HTML to get a specific CSS result doesn't feel appropriate. I don't think the syntax I proposed is as thoughtful as it could be, and should be thoroughly vetted. I do want to get a conversation started about the best ways to pacify this edge case, giving developers ways to achieve the effect without changing their markup.