diff --git a/css/80_app.css b/css/80_app.css
index bfe97908a..39448cc09 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -9,6 +9,13 @@
     border: 0;
     overflow: hidden;
 
+    /* Establish a local stacking context so all elements within iD are on the
+       same layer relative to elements outside iD - #7457.
+       https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+    */
+    position: relative;
+    z-index: 0;
+
     font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
@@ -5341,6 +5348,12 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 
 /* Intro walkthrough
  ----------------------------------------------------- */
+.curtain {
+    z-index: 1000;
+    pointer-events: none;
+    position: absolute;
+}
+
 .curtain-darkness {
     pointer-events: all;
     fill-opacity: 0.7;
@@ -5402,6 +5415,10 @@ li.hide + li.version .badge .tooltip .popover-arrow {
     display: inline-block;
 }
 
+.curtain-tooltip {
+    z-index: 1002;
+}
+
 .curtain-tooltip.tooltip.in {
     opacity: 1;
 }
diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js
index a7a5b16fd..1f317f1ba 100644
--- a/modules/ui/curtain.js
+++ b/modules/ui/curtain.js
@@ -20,9 +20,6 @@ export function uiCurtain() {
         surface = selection
             .append('svg')
             .attr('class', 'curtain')
-            .style('z-index', 1000)
-            .style('pointer-events', 'none')
-            .style('position', 'absolute')
             .style('top', 0)
             .style('left', 0);
 
@@ -34,8 +31,7 @@ export function uiCurtain() {
         d3_select(window).on('resize.curtain', resize);
 
         tooltip = selection.append('div')
-            .attr('class', 'tooltip')
-            .style('z-index', 1002);
+            .attr('class', 'tooltip');
 
         tooltip
             .append('div')