diff --git a/app/components/HoverPreview.js b/app/components/HoverPreview.js
index 39b8a3d8..ff1df8bd 100644
--- a/app/components/HoverPreview.js
+++ b/app/components/HoverPreview.js
@@ -201,6 +201,7 @@ const Card = styled.div`
 const Position = styled.div`
   margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
+  z-index: ${(props) => props.theme.depths.hoverPreview};
   display: flex;
   max-height: 75%;
 
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index 82264dd6..d02b379f 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -109,6 +109,7 @@ export const base = {
   depths: {
     header: 800,
     sidebar: 900,
+    hoverPreview: 998,
     // Note: editor lightbox is z-index 999
     modalOverlay: 2000,
     modal: 3000,