Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-position] Allow setting multiple named box insets #10754

Open
johannesodland opened this issue Aug 18, 2024 · 0 comments
Open

[css-position] Allow setting multiple named box insets #10754

johannesodland opened this issue Aug 18, 2024 · 0 comments
Labels
css-position-3 Current Work

Comments

@johannesodland
Copy link

Can we extend the box inset properties to allow authors to set multiple named box insets?

/* Make the element sticky against the scrollport, but only until it's 20px from the containing block */
position: sticky;
inset-block: 
    scrollport 0, 
    containing-block 20px;

A missing inset name should be interpreted automatically based on positioning, the same way insets work today.
(Using auto as an inset name would unfortunately be ambigous as it is also valid as a component value.)

position: absolute;
inset: 0;

Motivation

While one set of box insets is sufficient for most positioning schemes, sticky positioning is concerned with both the scrollport and the containing block. Currently authors can use margins to modify the containing block constraints, but the working group has resolved to ignore margins in sticky-pos calculation.

Margins are problematic as they are also used for in-flow positioning and because it is unclear how collapsing margins would apply. However, there are existing use cases for modifying the containing block constraints and authors should be provided with a means of specifying that inset.

Alternative solutions

#2496 suggests pulling sticky into a separate property.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-position-3 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants