Applying z-index to only child component does not work

Question

I'm trying to get the mouse pointer to detect this box A component, but it's rendered "underneath" the TransformWrapper component. (In my project, I need box A to be rendered before TransformWrapper )

At the same time, I also need box B to be always on top of box A .

Also, I cannot transform box A , that's why I put it outside of TransformWrapper .

Now I can change the z-index of box A to that it is higher than TransformWrapper , but that makes box A higher than box B as well. I tried changing the z-index of box B but it didn't work.

I also can't set pointerEvents to none because I need mouse events on all of them.

Is there a work around to achieve my desired behavior?

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",
  border: "1px #999 solid",
  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;

Here is the codesandbox.io link. I can't use the StackOverflow snippet because I can't import some Github libraries. https://codesandbox.io/s/sandbox1-fjevd?file=/src/App.js:0-1689

The libraries are react-draggable , react-xarrows , and react-zoom-pan-pinch

Answer 1

50% percent of the time, z-index issues are HTML problems. Try to place the two draggable in the same hierarchy to get the desire behavior:

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

I do recommend you that read about stack context and how z-index work. I know it's a pain in the ***, but it's the only way