feat: add baseZIndex congifuration (#107)

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/).

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',

src/config/index.js

@@ -99,6 +99,7 @@ ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
       md: 768,
       lg: 1024,
     },
+    baseZIndex: 100,
   },
 };