From 559509e2c815ba1c6a77bb40bd1bb230c7fb6171 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 7 May 2020 14:29:23 +0200
Subject: [PATCH] feat: add baseZIndex congifuration (#107)

---
 README.md           | 9 +++++++++
 src/App.js          | 2 ++
 src/config/index.js | 1 +
 3 files changed, 12 insertions(+)

diff --git a/README.md b/README.md
index 2007019a..bb697818 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ While you would still have to push your data to Algolia, the goal of Unified Ins
     - [`colors`](#colors)
     - [`text`](#text)
     - [`breakpoints`](#breakpoints)
+    - [`baseZIndex`](#basezindex)
 - [Disclaimer](#disclaimer)
 
 ## Getting started
@@ -562,6 +563,14 @@ The `src/config/index.js` file also lets you adjust Unified InstantSearch E-Comm
 
 > We've adapted the design of Unified InstantSearch to the default breakpoints. If you change them, make sure the layout still works the way you expect.
 
+#### `baseZIndex`
+
+> `number` | required
+
+The base `z-index` for the entire search UI.
+
+> Make sure to set a value that's higher than any `z-index` you've set in the CSS of your website so that the search UI is always on top of it.
+
 ## Disclaimer
 
 > Unified InstantSearch E-Commerce is made accessible to you for trial and experimentation purposes. You may decide to use it or not. You are aware that the use of Unified InstantSearch E-Commerce in production may increase your consumption of the Service, including [Queries Per Second](https://www.algolia.com/doc/faq/monitoring/which-queries-are-counted-as-part-of-the-max-qps-computations/).
diff --git a/src/App.js b/src/App.js
index d0a8c3dd..851046c8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -184,11 +184,13 @@ export function App({ config }) {
         createPortal(
           <>
             <div
+              style={{ zIndex: config.styles.baseZIndex }}
               className="uni-Overlay"
               onClick={() => setIsOverlayShowing(false)}
             />
 
             <div
+              style={{ zIndex: config.styles.baseZIndex }}
               className={[
                 'uni-Container',
                 isFiltering === true && 'uni-Container--filtering',
diff --git a/src/config/index.js b/src/config/index.js
index 8b6f1ff3..9502b526 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -99,6 +99,7 @@ ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
       md: 768,
       lg: 1024,
     },
+    baseZIndex: 100,
   },
 };