React-Select 和 React-Flow 重叠答案

【问题标题】：React-Select & React-Flow overlappingReact-Select 和 React-Flow 重叠
【发布时间】：2021-05-26 03:20:29
【问题描述】：

我正在为一个项目使用 React-Select 和 React-Flow (https://reactflow.dev/)。现在不幸的是，两者重叠，使我的 react-select 下拉菜单无法使用。我没有编辑css，所以我认为代码无济于事，无论如何，它很容易用下面的代码复制。还附上效果图。

有什么办法可以强制将 React-Select div 放在顶部？我尝试使用 z-index，但这似乎不会产生正确的结果。

import React from 'react';
import ReactFlow from 'react-flow-renderer';
import Select from 'react-select';

export default const Bug = () => {
    return(
        <div>
            <Select options={[{value:1, label:'option A'}, {value:2, label:'option B'}]}/>
            <ReactFlow/>
        </div>
    )
}

【问题讨论】：

您在哪里尝试过使用z-index？
是的，我尝试在不同的类上使用 z-index 1 和 2。
很难从您分享的小代码中分辨出来，但您可以尝试将z-index 添加到包含选择的div（同时确保您应用z-index 将其 position 声明为 z-index 仅适用于具有显式 `position 声明的元素）
对不起，代码很少，所有的css都是从模块继承的，添加起来似乎有点多。无论如何，将 z-index 添加到包含选择的 div 中！谢谢一百万！

标签： reactjs react-select

【解决方案1】：

感谢@Shmili Breuer！

手动将z-index 添加到包含react-select 的div 中，它高于React Flow 中的z-index 解决了我的问题！

<Card>
    <Card.Header className='z10'/>
        <Select .../>
    </Card.Header>
    <Card.Body>
        <ReactFlow/>
    </Card.Body>
</Card>

.z10 {
    z-index: 10;
}

【讨论】：