diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 9ef4302f32d66c..e04c870306612b 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -25,7 +25,7 @@ $z-layers: ( ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, ".edit-post-layout__footer": 30, - ".edit-post-header": 30, + ".edit-post-editor-regions__header": 30, ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss index ef0d452451fb11..d717f3c3657161 100644 --- a/packages/edit-post/src/components/editor-regions/style.scss +++ b/packages/edit-post/src/components/editor-regions/style.scss @@ -71,10 +71,16 @@ flex-shrink: 0; height: auto; // Keep the height flexible. border-bottom: $border-width solid $light-gray-500; + z-index: z-index(".edit-post-editor-regions__header"); // On Mobile the header is sticky. position: sticky; top: 0; + + @include break-small() { + top: $admin-bar-height-big; // The top bar is fixed on this breakpoint. + } + @include break-medium() { // Cancel the fixed positionning used in mobile. position: initial; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 466a6cc6280127..1abac2f94eeabb 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -8,7 +8,6 @@ align-items: center; // The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket. max-width: 100vw; - z-index: z-index(".edit-post-header"); // Make toolbar sticky on larger breakpoints @include break-zoomed-in {