DIV shows behind Google Maps Div rather than under it - html

Question

I have a react component that renders a google map as follows:
<div style={{ textAlign: "center" }}>
<h3>This is header text.</h3>
<div>
<LocationHeatMap
center={{ lat: 43.589, lng: -79.644 }}
zoom={11}
positions={data}
/>
</div>
<div style={{ textAlign: "center" }}>
This is some more text. PROBLEM IS WITH THIS.
</div>
</div>
The LocationHeatMap container returns the following
<div className="map-container">
<Map
google={this.props.google}
style={{width: '100%', height: '80%', position: 'relative'}}
className={"map"}
zoom={this.props.zoom}
initialCenter={this.props.center}
onReady={this.handleMapReady}
>
<HeatMap
gradient={gradient}
positions={this.props.positions}
opacity={1}
radius={10}
maxIntensity={50}
/>
</Map>
</div>
But when it renders the problem text appears behind the map div, rather than under it. I have tried position: relative on both the map div, the text div, tried virtually every display and block settings in the browser, but none of them do it. The only thing that works is if I add a top class in css for the text div, but that has its own problems in responsive design. And I am also pretty sure that the top is being applied relative to the header text and not the google map. What can I do to make the problem text appear relatively under the google map.

Answer 1

I know from past experience you can run into issues with a maps div by not using an explicit height. I have included an adjustment below. Hope it helps :)
<div style={{ textAlign: "center" }}>
<h3>This is header text.</h3>
<div class="row">
<div className="map-container row">
<div class="map" google={this.props.google} style={{width: '100%', height: '80%', position: 'relative'}} className={"map"} zoom={this.props.zoom} initialCenter={this.props.center} onReady={this.handleMapReady}>
<HeatMap gradient={gradient} positions={this.props.positions} opacity={1} radius={10} maxIntensity={50} />
</div>
</div>
</div>
<div class="row" style={{ textAlign: "center" }}>
This is some more text. PROBLEM IS WITH TH IS.
</div>
</div>
<style>
.row {
width: 100%;
background-color: lightblue;
}
.map {
width: 100%;
min-height: 200px;
background-color: yellow;
}
</style>
The other thing is making sure the divs are full width:
You can check out an example here:
CodePen Example