diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
index 0bfd4562..252ebf74 100644
--- a/src/components/dialog/base-floating-dialog.js
+++ b/src/components/dialog/base-floating-dialog.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { ToggleButtonGroup, ToggleButton, Box, Stack, Typography,
     Dialog, DialogContent, DialogTitle, Paper, IconButton} from '@mui/material';
 import Draggable from "react-draggable";
@@ -8,7 +8,8 @@ import "react-resizable/css/styles.css";
 
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 
-import { markUnclicked } from '@utils/map-utils';
+import {markUnclicked} from '@utils/map-utils';
+import {useLayers} from "@context";
 
 // define the properties of this component's input
 BaseFloatingDialog.propTypes = {
@@ -48,6 +49,11 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
     const minHeight = 175;
     const maxHeight = 500;
 
+    // get the context for the compare layers view
+    const {
+        topMostDialogIndex, setTopMostDialogIndex
+    } = useLayers();
+
     /**
     * the close dialog handler
     */
@@ -62,29 +68,46 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
         }
     };
 
+    /**
+     * handles a click on the dialog to make it have focus
+     */
+    const handleClick = () => {
+        // set the new topmost dialog in the stack
+        setTopMostDialogIndex(index);
+    };
+
+    /**
+     * Runs when the dialog is created to make it have focus
+     */
+    useEffect( () => {
+        // set the focus on this dialog
+        setTopMostDialogIndex(index);
+    }, [] );
+
     /**
     * configure and render the resizeable floating dialog
     */
     return (
-        <Resizable
-            // height={ newHeight }
-            width={ newWidth }
-            maxWidth=""
-            onResize={ (event) => {
-                setNewWidth(newWidth + event.movementX);
-                setNewHeight(newHeight + event.movementY);
-            }}
-            axis="x">
-            <Dialog
-                aria-labelledby="draggable-dialog"
-                open={ true }
-                onClose={ handleClose }
-                PaperComponent={ PaperComponent }
-                // TransitionComponent={ Transition }
-                disableEnforceFocus
-                style={{ pointerEvents: 'none' }}
-                PaperProps={{ left: index * 20, top: index * 35, sx: { pointerEvents: 'auto' } }}
-                sx={{ ml: 6, zIndex: 999, '.MuiBackdrop-root': { backgroundColor: 'transparent' } }}>
+            <Resizable
+                height={ newHeight }
+                width={ newWidth }
+                maxWidth=""
+                onResize={ (event) => {
+                    setNewWidth(newWidth + event.movementX);
+                    setNewHeight(newHeight + event.movementY);
+                }}
+                axis="x"
+                draggableOpts={{ handleSize: [20, 20] }}>
+                <Dialog
+                    onClick={ handleClick }
+                    onClose={ handleClose }
+                    aria-labelledby="draggable-dialog"
+                    open={ true }
+                    PaperComponent={ PaperComponent }
+                    disableEnforceFocus
+                    style={{ pointerEvents: 'none' }}
+                    PaperProps={{left: index * 45, top: index * 35, sx: { pointerEvents: 'auto' } }}
+                    sx={{ ml: 6, zIndex: (index===topMostDialogIndex) ? 1000 : 999, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}>
 
                 <DialogTitle
                     id="draggable-dialog"
diff --git a/src/context/map-context.js b/src/context/map-context.js
index a09542f2..a96b6ef3 100644
--- a/src/context/map-context.js
+++ b/src/context/map-context.js
@@ -62,6 +62,9 @@ export const LayersProvider = ({ children }) => {
   // state to capture the default startup instance name
   const [defaultInstanceName, setDefaultInstanceName] = useState(null);
 
+  // state to keep track of the obs dialog that has focus
+  const [topMostDialogIndex, setTopMostDialogIndex] = useState(0);
+
   /**
    * this section is for the side-by-side compare mode items
    * @type {string}
@@ -406,7 +409,10 @@ export const LayersProvider = ({ children }) => {
         rightLayerProps, setRightLayerProps,
         selectedRightLayer, setSelectedRightLayer,
         sideBySideLayers, setSideBySideLayers,
-        resetCompare, removeSideBySideLayers
+        resetCompare, removeSideBySideLayers,
+
+        // tracks the dialog that has focus
+        topMostDialogIndex, setTopMostDialogIndex
       }}
     >
       {children}