How to embed an Exit Button inside a Mapbox-GL Static Map Component with a Deck-GL Layer in it

Question

I have the following code for mapping,

   <DeckGL
    initialViewState={INITIAL_VIEW_STATE}
    controller={true}
    layers={layers}
    getTooltip={({object}) => object && `Paths Covered`}
  >
  <button className="button" onClick={() => history.push("/")}>Back</button>

  <StaticMap
    mapStyle="mapbox://styles/mapbox/light-v9"
    mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
  />
  </DeckGL>

I want to put the button inside the map,but it is showing up on top of it as shown here

Rendered Map

How do i make sure that the button is included in the map and not rendered on top of it?

Answer 1

You can achieve this using css.

For example,

.button{
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
}

position: absolute - An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

z-index - The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).