[英]Applying z-index to only child component does not work
I'm trying to get the mouse pointer to detect this box A
component, but it's rendered "underneath" the TransformWrapper
component.我试图让鼠标指针检测这个
box A
组件,但它呈现在TransformWrapper
组件的“下方”。 (In my project, I need box A
to be rendered before TransformWrapper
) (在我的项目中,我需要在
TransformWrapper
之前渲染box A
)
At the same time, I also need box B
to be always on top of box A
.同时,我还需要
box B
始终位于box A
之上。
Also, I cannot transform box A
, that's why I put it outside of TransformWrapper
.另外,我无法转换
box A
,这就是我将它放在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.现在我可以将
box A
的 z-index 更改为高于TransformWrapper
,但这也使box A
高于box B
。 I tried changing the z-index of box B
but it didn't work.我尝试更改
box B
的 z-index,但没有用。
I also can't set pointerEvents
to none
because I need mouse events on all of them.我也不能将
pointerEvents
设置为none
因为我需要所有这些事件的鼠标事件。
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.这是
codesandbox.io
链接。 I can't use the StackOverflow snippet because I can't import some Github libraries.我无法使用 StackOverflow 代码段,因为我无法导入某些 Github 库。 https://codesandbox.io/s/sandbox1-fjevd?file=/src/App.js:0-1689
https://codesandbox.io/s/sandbox1-fjevd?file=/src/App.js:0-1689
The libraries are react-draggable
, react-xarrows
, and react-zoom-pan-pinch
这些库是
react-draggable
、 react-xarrows
和react-zoom-pan-pinch
50% percent of the time, z-index issues are HTML problems. 50% 的情况下,z-index 问题是 HTML 问题。 Try to place the two
draggable
in the same hierarchy to get the desire behavior:尝试将两个
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>
);
I do recommend you that read about stack context and how z-index work.我建议您阅读有关堆栈上下文以及 z-index 工作原理的信息。 I know it's a pain in the ***, but it's the only way
我知道这很痛苦,但这是唯一的方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.