reactjs - 如何在带有 Deck-GL 层的 Mapbox-GL 静态地图组件中嵌入退出按钮

Question

我有以下映射代码，

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

我想将按钮放在地图内，但它显示在它的顶部，如此处所示

渲染地图

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

Answer 1

您可以使用 css 实现此目的。

例如，

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

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

注意：“定位”元素是指其位置除静态之外的任何元素。

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

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘性）。