Log an error on native if using zIndex without position

Non-static position is required for zIndex to have an effect. This
error matches the warning in the browser dev tools

Author: necolas

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -115,6 +115,12 @@ export function createStrictDOMComponent<T, P: StrictProps>(
           }
         });
       }
+
+      if (nativeStyle.zIndex != null && nativeStyle.position === 'static') {
+        errorMsg(
+          '"position:static" prevents "zIndex" from having an effect. Try setting "position" to something other than "static".'
+        );
+      }
     }
 
     if (displayValue === 'flex') {

packages/react-strict-dom/tests/html-test.native.js

@@ -138,6 +138,40 @@ describe('<html.*>', () => {
     });
   });
 
+  test('zIndex with position:static', () => {
+    const styles = css.create({
+      static: {
+        position: 'static',
+        zIndex: 1
+      }
+    });
+    act(() => {
+      create(<html.div style={styles.static} />);
+    });
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"position:static" prevents "zIndex" from having an effect.'
+      )
+    );
+  });
+
+  test('zIndex with position:relative', () => {
+    const styles = css.create({
+      relative: {
+        position: 'relative',
+        zIndex: 1
+      }
+    });
+    act(() => {
+      create(<html.div style={styles.relative} />);
+    });
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"position:static" prevents "zIndex" from having an effect.'
+      )
+    );
+  });
+
   test('auto-wraps raw strings', () => {
     const styles = css.create({
       root: {