如何将退出按钮嵌入具有Deck-GL层的Mapbox-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>

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

Rendered Map

我如何确保该按钮包含在地图中而不在其顶部呈现？

解决方法

您可以使用CSS实现此功能。

例如，

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

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

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

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

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