Re: [csswg-drafts] [css-position-4] Define "top layer" positioning scheme (#4998)

Regarding the prior discussions, it sounds to me like there's actually a need for multiple (UA) top layers.

A definition for allowing elements to be placed in the top layer might have these requirements:

* Any element can be placed into the top layer.
* If there are multiple elements of different DOM subtrees to be placed in the top layer, the one later in the DOM tree wins.
* A descendant element of a top-layer element can be placed into its own top layer.

With this, the often mentioned use case of having a tooltip within a dialog within a fullscreen element could be covered. Each of them would be placed in its own top layer.

In case the rules above are unclear, here are some examples which hopefully make it easier to understand the concept:

Simple case:
```html
<a>
  <top-layer/> <!-- Will be in the top layer (above <c/>) -->
  <b>
    <c/>
  </b>
</a>
```

Two elements in top layer:
```html
<a>
  <top-layer/>
  <b>
    <c/>
  </b>
  <top-layer/> <!-- Will be in the top layer (above <c/> and <d/>) because it's later in the DOM tree than the other <top-layer/> -->
  <d/>
</a>
```

Nested elements in top layer:
```html
<a>
  <top-layer> <!-- Will be put in the top layer (above <e/>) -->
    <b>
      <top-layer> <!-- Will be in the top layer above the outer <top-layer/> (and <c/>) -->
      <c/>
    </b>
  </top-layer>
  <d>
    <e/>
  </d>
</a>
```

Note: While this is meant to define UA-controlled top layers, it could easily be extended to include author-defined top layers. The only additional rule would be that UA top layers are always above authored ones in their relative context.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4998#issuecomment-1140344109 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 May 2022 23:37:41 UTC