Reactjs 如何在Mapbox GL静态地图组件中嵌入一个退出按钮，其中包含一个套牌GL图层

我有以下映射代码

   <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>

object&&`path-Covered`}
>
历史记录。向后推（“/”}>

我想把按钮放在地图里，但它显示在上面，如图所示

---

如何确保按钮包含在地图中，而不是呈现在地图上？

您可以使用css实现这一点

比如说,

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

位置：绝对位置- 具有位置的元素：绝对；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。然而；如果绝对定位元素没有定位的祖先，它将使用文档正文，并随着页面滚动而移动

注：“定位”元素的位置是除静态之外的任何东西

z指数- z-index属性指定元素的堆栈顺序。具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素的前面

注意：z索引仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘滞）