Skip to content

Add Feature Box Alignment of abspos elements #2947

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

jamesnw
Copy link
Collaborator

@jamesnw jamesnw commented May 8, 2025

The following keys are duplicated in absolute-positioning. I think it's reasonable to have them in both, but removing them from absolute-positioning would allow us to remove the compute_from. This would be blocked by #1173.

  • css.properties.place-self.position_absolute_context
  • css.properties.align-self.position_absolute_context
  • css.properties.justify-self.position_absolute_context

Addresses #2905

@github-actions github-actions bot added the feature definition Creating or defining new features or groups of features. label May 8, 2025
@jamesnw jamesnw linked an issue May 8, 2025 that may be closed by this pull request
@a2425rdl

This comment was marked as off-topic.

@@ -0,0 +1,8 @@
name: Box alignment of absolute positioned elements
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find this name a bit long, and I wonder if developers are going to easily associate it to what the feature is about.
How about "Absolute positioning alignment"?

Unfortunately, I can't find much resources online that talk about this. I was hoping to find a commonly accepted feature name, but no.

The only thing I could find is my own (now outdated) css alignment cheatsheet.
But, reading it again, I think the scope of this feature here is different, and I'm finding myself a bit confused by all of the ways in which the align-* and justify-* properties can be used.

The feature you are proposing is specifically about absolute positioning. When I tested it, I found that justify-self seems to work fine (i.e. setting it to center does center the absolutely positioned box within its container), but align-self is surprising (e.g. to center the box, I need to use the value anchor-center as center doesn't do what I expect it to do).

Is there also a feature we should be creating about aligning elements within a block layout (as opposed to aligning them within a grid, or flex layout)?
For example, we already have align-content in block layouts. I wonder if we should expand this feature to be more generally about alignment within block layouts. Indeed, while align-content does work like padding, when set on the container block layout, there's also justify-items (or justify-self on children elements) which works kind of like margin and can be used to align elements along the inline axis. See https://patrickbrosset.com/lab/alignment-in-blocks/ and its source code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature definition Creating or defining new features or groups of features.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Box alignment features are hidden by current organization
3 participants