title: How do I stack components on top of each other in React?
body: <p>I'm trying to stack some components on top of some base map layer that I have, but I'm finding that the other components seem to always go below my map.</p>
  
  <p>I've created a <em>functional statemeless component</em> for my map.</p>
  
  <h3>map.js</h3>
  
  <pre><code>const divStyle = {
    position: 'absolute',
    zIndex: -1
  };
  
  return (
    &lt;ReactMapGL
      style={divStyle}
      width={props.width}
      height={props.height}
      latitude={props.latitude}
      longitude={props.longitude}
      mapStyle={mapStyle}
      zoom={props.zoom}
      preventStyleDiffing={true}
      onViewportChange={(viewport) =&gt; {
        updateViewport(viewport);
      }}/&gt;);
  </code></pre>
  
  <p>And then I have the following section in my component to stack:</p>
  
  <pre><code>const divStyle = {
    position: 'absolute',
    zIndex: 0,
    top: '0px',
    left: '0px',
  };
  
  &lt;div&gt;
    {Map({
      latitude: this.props.map.latitude,
      longitude: this.props.map.longitude,
      width: this.props.map.width,
      height: this.props.map.height,
      zoom: this.props.map.zoom,
      updateViewport: this.props.updateMapViewport
    })}
    &lt;Panel style={divStyle}&gt;&lt;/Panel&gt;
    &lt;div style={divStyle}&gt;Hello world!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought that maybe the fact that I'm calling <code>Map()</code> instead of using <code>&lt;Map/&gt;</code> had something to do with it, but that doesn't sound right. When I checked the Dev Console, I saw that my <code>map div</code> had <code>positive:relative</code>, while the other <code>divs</code> didn't have any <code>position</code>.</p>