diff --git a/src/components/container/sticky-bar/readme.md b/src/components/container/sticky-bar/readme.md index a537a14b93..28dea03ec7 100644 --- a/src/components/container/sticky-bar/readme.md +++ b/src/components/container/sticky-bar/readme.md @@ -33,6 +33,7 @@ Optionally the user can set the `color` property on the `sbb-sticky-bar` in orde | -------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--sbb-sticky-bar-padding-block` | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar. | | `--sbb-sticky-bar-bottom-overlapping-height` | `0px` | Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow. | +| `--sbb-sticky-bar-z-index` | | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. | ## Slots diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss index fac89161bb..d6ce6108bb 100644 --- a/src/components/container/sticky-bar/sticky-bar.scss +++ b/src/components/container/sticky-bar/sticky-bar.scss @@ -39,6 +39,7 @@ $intersector-overlapping: 1px; position: sticky; inset-block-end: 0; display: block; + z-index: var(--sbb-sticky-bar-z-index); &::after, &::before { diff --git a/src/components/container/sticky-bar/sticky-bar.ts b/src/components/container/sticky-bar/sticky-bar.ts index 02a14e7810..32999f0bdd 100644 --- a/src/components/container/sticky-bar/sticky-bar.ts +++ b/src/components/container/sticky-bar/sticky-bar.ts @@ -14,6 +14,8 @@ import style from './sticky-bar.scss?lit&inline'; * @cssprop [--sbb-sticky-bar-bottom-overlapping-height=0px] - Define an additional area where * the sticky bar overlaps the following content on the bottom. * This area becomes visible when the sticky bar transitions from sticky to the normal document flow. + * @cssprop [--sbb-sticky-bar-z-index] - To specify a custom stack order, + * the `z-index` can be overridden by defining this CSS variable. */ @customElement('sbb-sticky-bar') @hostAttributes({