ZStack being absolutely positioned makes it hard to center and size

[justgage]

Description

When working on Day One Web, we're trying to use ZStack to stack avatars, but it's troublesome due to the absolute positioning. Absolute positioning is problematic because it no longer dynamically takes up space in the DOM and can't be as quickly centered with Flexbox.

I'm curious if we can't use a negative margin instead of absolute positioning, and you can still get the proper layering by using a big of a hack with position: relative (see below) : https://codepen.io/justgage/pen/GRwjPZP

(in case the codepen dies, here's the code)

Screen.Recording.2023-06-22.at.7.43.02.AM.mov

<div class="overlap-stack justify-center reverse">
  <div class="avatar blue">
  </div>
  <div class="avatar red">
  </div>
  <div class="avatar">
  </div>
</div>

.avatar {
  width: 50px;
  height: 50px;
  background-color: rgba(100, 100, 100, 0.8);
  border-radius: 99999px;
  position: relative; /* Add position relative for z-index to work */
  z-index: 1; /* Set initial z-index */
}

.red {
  background-color: #ff0000;
}

.blue {
  background-color: blue;
}

.overlap-stack {
  display: flex;
  & > * + * {
    margin-left: -20px;
  }
  background-color: lightgreen;
}

.reverse {
  flex-direction: row-reverse;
  & > * + * {
    margin-right: -20px;
  }
  & > * {
    margin-left: 0;
  }
}

.justify-center {
  justify-content: center;
}

Step-by-step reproduction instructions

Here's a code example of something we were trying to do (simplified a bit)

<div css={{ display: "flex," justifyItems: "center" }}>
    <ZStack offset={20} isLayered css={{ width, height: "30px" }}>
          {avatarsToShow.map((p: JournalParticipant) => (
            <Avatar user={p} />
          ))}
    </ZStack>
</div>

Screenshots, screen recording, code snippet

Here you can see this is even happening in the storybook if you wrap an element around it:

Environment info

    "@wordpress/components": "23.8.0",

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ciampo]

Hey there 👋

Setting the isLayered prop to false should already use position: relative, have you tried with that?

[justgage]

@ciampo Ah! Look at that. You're right, although then it requires you to make the offset negative which I find a bit confusing. At that point, what does isLayered really do for us?

[justgage]

It looks like it's doing close to the same thing, but it's wrapping each element in another div that doesn't give you control, leading to things needing to be appropriately centered.

(this is an extreme example to show the extra div)

Expected behavior when they are spread apart is that they look visually center (for me) 👇

[ciampo]

@justgage I wasn't around when the ZStack component was created, and therefore I, unfortunately, don't have the context required to give you a comprehensive explanation around the isLayered prop.

Your points makes sense, though! I think I may be able to rewrite the component using CSS grid, so that the final "visual" result doesn't change, but allowing the component's bounding box to reflect more closely the actual space taken by the component.

[ciampo]

Opened #51836, I'll try to prep for review by EOD