diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css
index 9c03d5346a..6c348896c4 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -57,7 +57,6 @@
 .toolbar .toolbar-bar,
 .toolbar .toolbar-tray {
   position: relative;
-  z-index: 1250;
 }
 .toolbar-horizontal .toolbar-tray {
   position: fixed;
@@ -73,6 +72,7 @@
   position: absolute;
   right: 0;
   top: 0;
+  z-index: 100;
 }
 .toolbar-oriented .toolbar-tray {
   left: 0;
@@ -97,10 +97,6 @@
   }
 }
 
-/* Layer the bar just above the trays and above contextual link triggers. */
-.toolbar-oriented .toolbar-bar {
-  z-index: 502;
-}
 /* Position the admin toolbar fixed when the configured standard breakpoint is
  * active. */
 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
diff --git a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php b/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
index 32b1a400cb..37fad54598 100644
--- a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
+++ b/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
@@ -14,7 +14,7 @@ class FilterOptionsTest extends JavascriptTestBase {
   /**
    * {@inheritdoc}
    */
-  public static $modules = ['node', 'views', 'views_ui', 'views_ui_test_field'];
+  public static $modules = ['node', 'views', 'views_ui', 'views_ui_test_field', 'toolbar'];
 
   /**
    * {@inheritdoc}
@@ -24,6 +24,7 @@ public function setUp() {
 
     $admin_user = $this->drupalCreateUser([
       'administer views',
+      'access toolbar',
     ]);
     $this->drupalLogin($admin_user);
   }
@@ -71,6 +72,16 @@ public function testFilterOptionsAddFields() {
     });
     $this->assertFalse($page->findField('name[views.views_test_field_2]')->isVisible());
     $this->assertFalse($page->findField('name[views.views_test_field_1]')->isVisible());
+
+    // Test the integration of the dialog with the toolbar module. Make sure
+    // that the checkboxes are not covered by the toolbar.
+    $page->pressButton('Vertical orientation');
+    $options_search->setValue('FIELD_1_TITLE');
+    $this->assertFalse($page->findField('name[views.views_test_field_1]')->isVisible());
+    $page->waitFor(10, function () use ($page) {
+      return !$page->findField('name[views.views_test_field_2]')->isVisible();
+    });
+    $this->assertTrue($page->findField('name[views.views_test_field_1]')->isVisible());
   }
 
 }
diff --git a/core/themes/bartik/css/components/toolbar.css b/core/themes/bartik/css/components/toolbar.css
index 35a5762cb8..8bf8a08517 100644
--- a/core/themes/bartik/css/components/toolbar.css
+++ b/core/themes/bartik/css/components/toolbar.css
@@ -6,3 +6,11 @@
 .toolbar a {
   border-bottom: none;
 }
+
+.toolbar .toolbar-tray {
+  z-index: 95;
+}
+
+.toolbar-oriented .toolbar-bar {
+  z-index: 100;
+}
diff --git a/core/themes/seven/css/components/toolbar.css b/core/themes/seven/css/components/toolbar.css
new file mode 100644
index 0000000000..f7d0bdd6e2
--- /dev/null
+++ b/core/themes/seven/css/components/toolbar.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Toolbar module style overrides.
+ */
+
+.toolbar .toolbar-tray {
+  z-index: 95;
+}
+
+.toolbar-oriented .toolbar-bar {
+  z-index: 100;
+}
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 508c0fe497..e46836b740 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -34,6 +34,7 @@ global-styling:
       css/components/system-status-counter.css: {}
       css/components/tabs.css: {}
       css/components/views-ui.css: {}
+      css/components/toolbar.css: {}
     theme:
       css/theme/colors.css: {}
     layout: