尽管 z-index 更高，但 React-Leaflet 工具提示隐藏在其他层后面

Question

这是关于的后续问题。

当我添加一个圆时，尽管工具提示的 z-Index 更高，但矩形的工具提示隐藏在圆的后面。这让我很困惑，为什么会这样？

const Map = (props) => {
  return (
    <MapContainer center={[48, 11]} zoom={8} id="mapId">
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Pane name="rectanglePane" style={{ zIndex: 401 }}>
        <Rectangle
          bounds={[
            [47.5, 10.5],
            [48.5, 11.5]
          ]}
        >
          <Pane name="ttPane" style={{ zIndex: 403 }}>
            <Tooltip sticky>Rectangle Tooltip</Tooltip>
          </Pane>
        </Rectangle>
      </Pane>
      <Pane name="circlePane" style={{ zIndex: 402 }}>
        <Circle
          center={[48, 11]}
          radius={20000}
        >
          <Pane name="ttCirclePane" style={{ zIndex: 404 }}>
            <Tooltip sticky>Circle Tooltip</Tooltip>
          </Pane>
        </Circle>
      </Pane>
    </MapContainer>
  );
};

Answer 1

此行为的原因是子元素的 z-index 受父元素的 z-index 限制。因此，因为 <Pane name="rectanglePane" style={{ zIndex: 401 }}> 的 z-index 低于 <Pane name="circlePane" style={{ zIndex: 402 }}>，所以 rectanglePane 内的所有元素将始终出现在 circlePane 后面，无论它们的 z-index 是什么。

为了让您的应用程序按您希望的方式工作，您必须将 ttPane 元素添加到 <Pane name="rectanglePane" style={{ zIndex: 401 }}> 之外的另一个元素中，并且该元素具有更高的 [=10] =] 比 circlePane。然后，您将不得不完成触发该问题范围之外的元素的后勤工作。

我注意到您可能正在使用从另一个库导入的组件。如果是这种情况并且您无法在 rectanglePane 元素之外添加工具提示，您可以尝试动态控制状态内的 zIndexes 并在 rectanglePane 和 circlePane 之间切换它们的值（这将切换 circle/border 出现顺序）。这也将涉及添加您自己的逻辑，但不幸的是，这是实现您想要的结果的唯一其他方法。

尽管 z-index 更高，但 React-Leaflet 工具提示隐藏在其他层后面

React-Leaflet Tooltips are hidden behind other layer despite higher z-index

javascript

leaflet

react-leaflet