Fix header z-index issues

WordPress · Oct 25, 2019 · 4f650d3 · 4f650d3
1 parent e4efe7b
commit 4f650d3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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 {