astro Default z-index alignment needed with design system

Describe the bug

The default z-index values for several of the web-components are not aligned with the proper component hierarchy for the design system. For example, the classification marking appears below the dialog modal background. We should revisit this hierarchy and ensure that the default styles reflect the proper visual hierarchy.

To Reproduce

See code sandbox demo

Current behavior

The default hierarchy for components meant to overlap other components appears to be as follows:

RuxDialog RuxTooltip RuxToast RuxPopUp RuxClassificationMarking RuxNotificationBanner/RuxGlobalStatusBar

Expected behavior

To align with standards it should be:

RuxTooltip RuxClassificationMarking RuxDialog RuxPopUp RuxToast RuxGlobalStatusBar/RuxNotificationBanner

With the general rule of any component should appear over its parent container. For example, a tooltip on text within a toast message should appear over the toast.

Screenshots

CodeSandbox https://codesandbox.io/p/sandbox/astro-z-index-issue-nn4dw3

Environment (please complete the following information):

Browser = chrome
@astrouxds/astro-web-components version = 7.23.0
Framework = React
Framework wrapper version = @astrouxds/react

Additional context None

Oct 08 '24 20:10 NicDominguez

Just quickly adding on to this, RuxPopUps seem to be displaying behind RuxTimeline objects.

https://github.com/user-attachments/assets/89ddc5f7-c276-449d-97aa-429a0ad8f721

Code: <rux-timeline timezone="America/New_York" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" interval="hour" ruler-position="both" zoom="1" class="hydrated"><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_1</div><rux-time-region start="2025-04-21T18:48:19.341Z" end="2025-04-21T20:53:54.345Z" class="hydrated" style="grid-area: 1 / 62 / auto / 187; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_1</div><div>Name: Item_1Unique Event ID: event_1Priority: 3Action: addStart Time: 2025-04-21T18:48:19.341ZStop Time: 2025-04-21T20:53:54.345ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T02:18:23.656Z" end="2025-04-22T04:21:55.851Z" class="hydrated" style="grid-area: 1 / 512 / auto / 635; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_8</div><div>Name: Item_1Unique Event ID: event_8Priority: 0Action: addStart Time: 2025-04-22T02:18:23.656ZStop Time: 2025-04-22T04:21:55.851ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T07:52:36.585Z" end="2025-04-22T10:08:25.511Z" class="hydrated" style="grid-area: 1 / 846 / auto / 982; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_15</div><div>Name: Item_1Unique Event ID: event_15Priority: 4Action: addStart Time: 2025-04-22T07:52:36.585ZStop Time: 2025-04-22T10:08:25.511ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_2</div><rux-time-region start="2025-04-21T19:37:49.608Z" end="2025-04-21T22:17:50.760Z" class="hydrated" style="grid-area: 1 / 111 / auto / 271; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_2</div><div>Name: Item_2Unique Event ID: event_2Priority: 4Action: addStart Time: 2025-04-21T19:37:49.608ZStop Time: 2025-04-21T22:17:50.760ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T02:12:36.007Z" end="2025-04-22T04:41:24.033Z" class="hydrated" style="grid-area: 1 / 506 / auto / 655; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_9</div><div>Name: Item_2Unique Event ID: event_9Priority: 0Action: addStart Time: 2025-04-22T02:12:36.007ZStop Time: 2025-04-22T04:41:24.033ZPower Mode: 1</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T09:14:53.735Z" end="2025-04-22T11:17:20.088Z" class="hydrated" style="grid-area: 1 / 928 / auto / 1051; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_16</div><div>Name: Item_2Unique Event ID: event_16Priority: 0Action: addStart Time: 2025-04-22T09:14:53.735ZStop Time: 2025-04-22T11:17:20.088ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_3</div><rux-time-region start="2025-04-21T21:07:19.981Z" end="2025-04-22T00:02:55.476Z" class="hydrated" style="grid-area: 1 / 201 / auto / 376; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_3</div><div>Name: Item_3Unique Event ID: event_3Priority: 3Action: addStart Time: 2025-04-21T21:07:19.981ZStop Time: 2025-04-22T00:02:55.476ZPower Mode: 1</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T03:52:33.052Z" end="2025-04-22T06:43:19.729Z" class="hydrated" style="grid-area: 1 / 606 / auto / 777; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_10</div><div>Name: Item_3Unique Event ID: event_10Priority: 4Action: addStart Time: 2025-04-22T03:52:33.052ZStop Time: 2025-04-22T06:43:19.729ZPower Mode: 1</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T10:02:10.800Z" end="2025-04-22T12:18:56.479Z" class="hydrated" style="grid-area: 1 / 975 / auto / 1112; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_17</div><div>Name: Item_3Unique Event ID: event_17Priority: 1Action: addStart Time: 2025-04-22T10:02:10.800ZStop Time: 2025-04-22T12:18:56.479ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_4</div><rux-time-region start="2025-04-21T21:40:16.935Z" end="2025-04-22T00:24:42.629Z" class="hydrated" style="grid-area: 1 / 233 / auto / 398; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_4</div><div>Name: Item_4Unique Event ID: event_4Priority: 1Action: addStart Time: 2025-04-21T21:40:16.935ZStop Time: 2025-04-22T00:24:42.629ZPower Mode: 1</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T04:10:54.005Z" end="2025-04-22T06:43:14.578Z" class="hydrated" style="grid-area: 1 / 624 / auto / 776; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_11</div><div>Name: Item_4Unique Event ID: event_11Priority: 1Action: addStart Time: 2025-04-22T04:10:54.005ZStop Time: 2025-04-22T06:43:14.578ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T12:32:59.539Z" end="2025-04-22T15:02:06.505Z" class="hydrated" style="grid-area: 1 / 1126 / auto / 1275; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_18</div><div>Name: Item_4Unique Event ID: event_18Priority: 2Action: addStart Time: 2025-04-22T12:32:59.539ZStop Time: 2025-04-22T15:02:06.505ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_5</div><rux-time-region start="2025-04-21T23:06:50.619Z" end="2025-04-22T01:57:20.900Z" class="hydrated" style="grid-area: 1 / 320 / auto / 491; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_5</div><div>Name: Item_5Unique Event ID: event_5Priority: 2Action: addStart Time: 2025-04-21T23:06:50.619ZStop Time: 2025-04-22T01:57:20.900ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T06:23:27.883Z" end="2025-04-22T09:12:05.797Z" class="hydrated" style="grid-area: 1 / 757 / auto / 925; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_12</div><div>Name: Item_5Unique Event ID: event_12Priority: 1Action: addStart Time: 2025-04-22T06:23:27.883ZStop Time: 2025-04-22T09:12:05.797ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T12:48:49.121Z" end="2025-04-22T14:53:41.914Z" class="hydrated" style="grid-area: 1 / 1142 / auto / 1267; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_19</div><div>Name: Item_5Unique Event ID: event_19Priority: 3Action: addStart Time: 2025-04-22T12:48:49.121ZStop Time: 2025-04-22T14:53:41.914ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_6</div><rux-time-region start="2025-04-22T00:15:37.990Z" end="2025-04-22T02:58:48.822Z" class="hydrated" style="grid-area: 1 / 389 / auto / 552; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_6</div><div>Name: Item_6Unique Event ID: event_6Priority: 1Action: addStart Time: 2025-04-22T00:15:37.990ZStop Time: 2025-04-22T02:58:48.822ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T06:50:13.734Z" end="2025-04-22T09:28:43.493Z" class="hydrated" style="grid-area: 1 / 783 / auto / 942; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_13</div><div>Name: Item_6Unique Event ID: event_13Priority: 0Action: addStart Time: 2025-04-22T06:50:13.734ZStop Time: 2025-04-22T09:28:43.493ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T13:22:55.761Z" end="2025-04-22T16:21:41.053Z" class="hydrated" style="grid-area: 1 / 1176 / auto / 1355; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_20</div><div>Name: Item_6Unique Event ID: event_20Priority: 2Action: addStart Time: 2025-04-22T13:22:55.761ZStop Time: 2025-04-22T16:21:41.053ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="America/New_York" class="hydrated" interval="hour"><div slot="label">Item_0</div><rux-time-region start="2025-04-21T23:51:47.877Z" end="2025-04-22T01:59:59.301Z" class="hydrated" style="grid-area: 1 / 365 / auto / 493; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_7</div><div>Name: Item_0Unique Event ID: event_7Priority: 0Action: addStart Time: 2025-04-21T23:51:47.877ZStop Time: 2025-04-22T01:59:59.301ZPower Mode: 0</div></rux-pop-up></rux-time-region><rux-time-region start="2025-04-22T08:33:53.097Z" end="2025-04-22T10:36:50.108Z" class="hydrated" style="grid-area: 1 / 887 / auto / 1010; display: block;"><rux-pop-up placement="bottom-end" strategy="fixed" enable-animation-frame="" class="popup-z-index hydrated"><div slot="trigger" tabindex="0">event_14</div><div>Name: Item_0Unique Event ID: event_14Priority: 0Action: addStart Time: 2025-04-22T08:33:53.097ZStop Time: 2025-04-22T10:36:50.108ZPower Mode: 0</div></rux-pop-up></rux-time-region></rux-track><rux-track slot="ruler" width="1" columns="1860" start="2025-04-21T17:48:19.341Z" end="2025-04-23T00:48:19.341Z" timezone="UTC" class="hydrated" interval="hour"><rux-ruler timezone="America/New_York" class="hydrated"></rux-ruler></rux-track></rux-timeline>

Apr 21 '25 18:04 FuzzyBoots

@FuzzyBoots The rux-pop-up has a part that can be targeted with CSS. The one you should be concerned with is the popup-content found under the API section -> CSS shadow parts.

First you will want to address the stacking context for rux-timeline, rux-track and rux-time-region. position: relative establishes the context for all the descendants of these components. z-index: auto in combination with the relative position tells the elements to use the current stacking context rather than create their own.

Now you can target the popup-content and set a z-index.

This is what I added to your code in a code sandbox to get things to behave.

Link to sandbox

Apr 22 '25 16:04 brothhammer

@brothhammer Thank you for your prompt response. Your code worked for me in that now the pop-up displays in front of the either timeline entries, although currently, the names at the left still appear in front. I'm experimenting to fix that.

And, is this indeed the same z-index bug, or a separate one?

Apr 23 '25 16:04 FuzzyBoots

The "item_1, item_2, ect." names. These are behind the pop up in the code sandbox.

I'm not sure this is a bug at all. Rather it is a result of using web components. Each component was developed with a shadow dom. So when they get nested each one establishes it's own dom to prevent CSS leakage in or out of the component. In the case of z-index they each establish their own stacking priority.

Apr 23 '25 21:04 brothhammer