仅将z-index应用于子组件不起作用

如何解决仅将z-index应用于子组件不起作用

我正在尝试获取鼠标指针来检测此Box A组件，但它呈现在TransformWrapper组件下方。 （在我的项目中，我需要 Box A在TransformWrapper之前呈现）

同时，我也需要 Box B始终位于Box A的顶部。

此外，我无法转换Box A，这就是为什么将其放在TransformWrapper之外的原因。

现在，我可以将Box A的z索引更改为高于TransformWrapper，但也使Box A也高于Box B。我尝试更改Box B的z索引，但是没有用。

我也无法将pointerEvents设置为none，因为我需要所有鼠标事件。

是否可以解决我想要的行为？

import React from "react";
import Draggable from "react-draggable";
import { TransformWrapper,TransformComponent } from "react-zoom-pan-pinch";

const BoxStyle = {
  position: "absolute",border: "1px #999 solid",borderRadius: "10px",textAlign: "center"
};

const canvasstyle = {
  width: "60vw",height: "60vh",borderRadius: "10px"
};

const Box = (props) => {
  return (
    <div
      className="dragTable"
      style={{
        ...BoxStyle,left: props.left,top: props.top,height: 100,width: 100,backgroundColor: "#fafafa"
      }}
    >
      {" "}
      {props.id}{" "}
    </div>
  );
};

const App = () => {
  const panoptions = { disableOnTarget: ["dragTable"] };
  const transformOptions = {
    limitToBounds: false,minScale: 0.25,maxScale: 3
  };

  return (
    <div>
      <Draggable>
        {/* uncomment this style for Box A to be draggable but on top of Box B */}
        <div
        // style={{position: "absolute",zIndex: 1}}
        >
          <Box
            id="Box A,supposed to be draggable too"
            left={40}
            top={50}
          ></Box>
        </div>
      </Draggable>

      <TransformWrapper options={transformOptions} pan={panoptions}>
        <TransformComponent>
          <div style={canvasstyle} id="canvas">
            Pan Zoom canvas
            <Draggable>
              {/* this z-index doesn't work if the z-index of Box A is enabled */}
              <div style={{ position: "absolute",zIndex: 3 }}>
                <Box id="Box B,draggable" left={60} top={80}></Box>
              </div>
            </Draggable>
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );
};

export default App;

这里是codesandBox.io链接。我无法使用StackOverflow代码段，因为我无法导入一些Github库。 https://codesandbox.io/s/sandbox1-fjevd?file=/src/App.js:0-1689

库为react-draggable，react-xarrows和react-zoom-pan-pinch

解决方法

50％的时间里，z-index问题是HTML问题。尝试将两个draggable放在相同的层次结构中以获得欲望行为：

return (
    <div>
      <TransformWrapper options={transformOptions} pan={panOptions}>
        <TransformComponent>
          <div style={canvasStyle} id="canvas">
            <Draggable>
              {/* uncomment this style for box A to be draggable but on top of box B */}
              <div
              // style={{position: "absolute",zIndex: 1}}
              >
                <Box
                  id="box A,supposed to be draggable too"
                  left={40}
                  top={50}
                ></Box>
              </div>
            </Draggable>
            Pan Zoom canvas
            <Draggable>
              {/* this z-index doesn't work if the z-index of box A is enabled */}
              <div style={{ position: "absolute",zIndex: 3 }}>
                <Box id="box B,draggable" left={60} top={80}></Box>
              </div>
            </Draggable>
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );

我确实建议您阅读有关堆栈上下文以及z-index如何工作的信息。我知道这在***中很痛苦，但这是唯一的方法