[css-position][css-sticky] Make sticky positioning less restrictive

[ianthedev]

The sticky positioning (position: sticky) was implemented in a way which is a bit too restrictive. We need a way to free a sticky element from being strictly confined within its direct parent.

A use case is that a blog post has a list of social sharing links. And that list needs to be sticky positioned at the left side of the blog post so that readers can always see the list when they are reading the blog post. However, in HTML code, the list is in the footer element of the blog. And without moving the list outside the footer element and to the very top of the blog post, the desired sticky positioning would be impossible.

So we need a way for freely defining within which parent element our sticky element is being sticky.

We also need a way that allows us to firstly position an element at whatever position we desire and then set it to a sticky element. Currently, we cannot do the first step with position: sticky because we can no longer use position: absolute in this case.

Current spec: https://www.w3.org/TR/css-position-3/#stickypos-insets

[ianthedev]

To address the limitation of the current implementation, I would like to propose changing the syntax of sticky positioning to:

For defining the parent element:

/* Number values */
/* 1 means the first closest parent, 2 means the second closest parent, and so on */
sticky-parent: 1;
sticky-parent: 2;
sticky-parent: 3;

/* Selector values */
/* the number refers to the order of the closest matched selector, defaults to 1 */
sticky-parent: "article";
sticky-parent: "#post";
sticky-parent: "div" 2;
sticky-parent: "section" 3;

For defining the position:

/* Keyword values */
sticky-position: top;
sticky-position: right;
sticky-position: bottom;
sticky-position: left;

/* Percentage values */
sticky-position: 25% 75%;

/* Length values */
sticky-position: 0 0;
sticky-position: 1cm 2cm;
sticky-position: 10ch 8em;

/* Edge offsets values */
sticky-position: bottom 10px right 20px;
sticky-position: right 3em bottom 10px;
sticky-position: bottom 10px right;
sticky-position: top right 10px;

For shorthand:

/* sticky: <parent>, <position>; */
sticky: 1, top;
sticky: "article", right;
sticky: "div" 2, 25% 75%;
sticky: "section" 3, top right 10px;

Feedbacks are welcomed and appreciated.

[Loirooriol]

I think your problem is https://drafts.csswg.org/css-position/#sticky-pos

the box must be visually shifted (as for relative positioning) to be inward of that sticky view rectangle edge, insofar as it can while its position box remains contained within its containing block

where the containing block is usually the parent.

But rather than things like sticky-parent: "div" 2, it think it may be easier to let authors switch this containment to the absolute positioning containing block rather than the actual containing block. Then you would only need to add position: relative to the desired ancestor and that's it.

I think this is basically a duplicate of #2496, which also proposes a sticky property similar to your sticky-position.

[x-Jake-x]

I think I'm confused. You want something in the footer not to be in the footer -- so why wouldn't you use position:fixed instead -- or put the thing in its appropriate containing block to use sticky?

[ianthedev]

I think I'm confused. You want something in the footer not to be in the footer -- so why wouldn't you use position:fixed instead -- or put the thing in its appropriate containing block to use sticky?

The list of social sharing links makes more sense to be in the blog post's footer element. position: fixed does not restrict the list within the blog post's height, thus the list would overlap unwantedly with the banner and the contentinfo when users scroll up and down, respectively.

[x-Jake-x]

I think this is basically a duplicate of #2496, which also proposes a sticky property similar to your sticky-position.

I'm hesitant to think that it's an exact duplicate, but could possibly work hand-in-hand with #2496.

Part of me wants to say that by defining a target for sticky this inherently could be redefining the semantics provided by a DOM, which I don't like. I am not sure whether there is already a precedent for defining target elements in CSS. I like this general idea. Perhaps being able to define targets for various things would be useful in the future. I am not sure that this issue is the place to discuss that though.

It makes me wonder if specifying overflow: clip or overflow: visible to remove the immediate parent's ability to become established as the scrolling container would have the desired effect of getting the footer to attach where needed. (oh! just saw -- it looks like this is discussed in #865 -- maybe specifying overflow is the solution??)

[Fuseteam]

@ianthedev would making the footer itself sticky be useful for your use case?

[ianthedev]

@ianthedev would making the footer itself sticky be useful for your use case?

The footer also contains the "back to previous page" link, which does not need to be sticky. Therefore, making the footer itself sticky does not help in my case.

[Fuseteam]

ah makes sense hmm

[Fuseteam]

overflow:clip may be what we're looking for if i'm reading this comment correctly