How to load a on top of React google map component?

Question

I am trying to display a small card basically over the google maps component that this https://www.npmjs.com/package/@react-google-maps/api package provides. I set the zIndex to 2 but the <div> still shows below this map component.

The card element is not supposed to respond to any click it's just displayed on first load with the Map component

  return (
    <div>
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
      ></GoogleMap>
      <Tracking style={{zIndex: 2}}/>
    </div>
  );

Tracking is the div that contains information.

Map container style is:

const mapContainerStyle = {
  width: "100vw",
  height: "100vh",
};

Answer 1

Actually, there are a lot of ways to do it.

Briefly:

1. You have to add position: 'relative' to the parent component.
2. You have to add position: 'absolute' and zIndex: 0 to the child component that you want to display as the background.
3. You have to add position: 'absolute' and zIndex: 1 (or more) to the child component that you want to display as the foreground.

If you use inline styling, you could do this:

Adding top: some_number, left: some_number, right: some_number, or bottom: some_number is optional (depends on what position you want)

Here is the working code sandbox https://codesandbox.io/s/compassionate-rhodes-qbm43

App.js

import "./styles.css";
import Map from "./Map.js";
import Tracking from "./Tracking";

export default function App() {
  return (
    <div
      style={{
        position: "absolute",
        zIndex: 0,
        width: "100%", // or you can use width: '100vw'
        height: "100%" // or you can use height: '100vh'
      }}
    >
      <Map />
      <div
        style={{
          zIndex: 1,
          position: "absolute",
          top: 10,
          left: 10,
          backgroundColor: "white", // you can use any color value
          width: "10%", // or you can use width: any_number
          height: "90%" // or you can use height: any_number
        }}
      >
        <Tracking />
      </div>
    </div>
  );
}

Map.js

import React from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow
} from "@react-google-maps/api";
import Tracking from "./Tracking";
const libraries = ["places"];

const mapContainerStyle = {
  position: "relative",
  width: "100%",
  height: "100%"
};

const center = {
  lat: -33.86882,
  lng: 151.20929
};

function Map() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    libraries
  });

  if (loadError) return "Error loading maps";
  if (!isLoaded) return "Loading Maps";
  return (
    <div
      style={{
        position: "absolute",
        zIndex: 0,
        width: "100%", // or you can use width: '100vw'
        height: "100%" // or you can use height: '100vh'
      }}
    >
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
      ></GoogleMap>
    </div>
  );
}

export default Map;

Tracking.js

import React from "react";

const Tracking = () => {
  return (
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  );
};

export default Tracking;