位置绝对 div 在离开其父容器并进入另一个容器后隐藏

Question

标题几乎说明了一切。但这里我提供了一些示例和一个沙箱，让您了解我在说什么。
这是我创建并添加了所有依赖项的link to the sandbox。
正如您在第一张图片中看到的那样，我的下拉菜单位于所有内容的后面，其中一部分实际上被隐藏了。它在那里但不可见

下面是下拉菜单的样子：

我心想，问题可能是因为z-index。但是该元素应用了 z-index: 1000; 样式，您可以在下图中看到 chrome 检查中应用的样式和选定元素。如您所见，元素的整个矩形在检查中突出显示但不可见。

但是有一个 position: fixed; 标题，其中有一个下拉菜单，它也使用 react-bootstrap 下拉菜单。但它显示完美，没有任何问题。我给该标题一个静态位置，这是结果。下拉菜单仍然完美显示。

我已经思考和搜索这个问题好几个星期了，但仍然找不到解决方案。任何帮助将不胜感激，并提前感谢您。

import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import { Dropdown } from "react-bootstrap";

function UsersAdmin() {
  const users = [
    {
      id: 1,
      first_name: "test",
      last_name: "test",
      email: "test",
      mobile: "test",
      avatar: "avatar.png",
      created_at: "2021-11-15T19:14:44.000000Z",
      updated_at: "2021-11-15T19:14:44.000000Z"
    },
    {
      id: 2,
      first_name: "test",
      last_name: "test",
      email: "test",
      mobile: "test",
      avatar: "avatar.png",
      created_at: "2021-11-15T19:14:44.000000Z",
      updated_at: "2021-11-15T19:14:44.000000Z"
    },
    {
      id: 3,
      first_name: "test",
      last_name: "test",
      email: "test",
      mobile: "test",
      avatar: "avatar.png",
      created_at: "2021-11-15T19:14:44.000000Z",
      updated_at: "2021-11-15T19:14:44.000000Z"
    }
  ];

  const columns = [
    {
      name: "language item",
      selector: "id",
      sortable: true,
      width: "90px"
    },
    {
      name: "language item",
      selector: "first_name",
      sortable: true
    },
    {
      name: "language item",
      selector: "last_name",
      sortable: true
    },
    {
      name: "language item",
      selector: "email",
      sortable: true,
      grow: 1.5
    },
    {
      name: "language item",
      selector: "mobile",
      sortable: true
    },
    {
      name: "language item",
      selector: "created_at",
      sortable: true,
      grow: 2
    },
    {
      name: "language item",
      cell: (row) => (
        <div style={{ width: 50, height: 50 }}>
          <img
            src={`${process.env.REACT_APP_BASE_URL}/storage/${row.avatar}`}
            style={{ width: "100%", borderRadius: "50%" }}
          />
        </div>
      ),
      width: "75px"
    },
    {
      name: "language item",
      cell: (row) => (
        <Dropdown>
          <Dropdown.Toggle size="sm" />
          <Dropdown.Menu size="sm">
            <Dropdown.Item>
              <i className="fa fa-edit mr-1" /> {"language item"}
            </Dropdown.Item>
            <Dropdown.Item>
              <i className="fa fa-download mr-1" /> {"language item"}
            </Dropdown.Item>
            <Dropdown.Item>
              <i className="fa fa-download mr-1" /> {"language item"}
            </Dropdown.Item>
            <Dropdown.Item>
              <i className="mdi mdi-eye mr-1" /> {"language item"}
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      ),
      width: "75px"
    }
  ];

  return (
    <>
      <div className="container-fluid">
        <div className="p-3">
          <h2>{"language item"}</h2>
        </div>
        <div className="card" style={{ width: "100%" }}>
          <div className="card-body">
            <DataTableExtensions exportHeaders columns={columns} data={users}>
              <DataTable
                columns={columns}
                data={users}
                pagination
                defaultSortAsc={false}
                defaultSortField="updated_at"
                noHeader
              />
            </DataTableExtensions>
          </div>
        </div>
      </div>
    </>
  );
}

export default UsersAdmin;

Answer 1

这与 z-index 无关。您的选择正在隐藏，因为您的表格容器已溢出Y隐藏：

.hkMDrI {
    position: relative;
    width: 100%;
    border-radius: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
}

因此，您将无法看到div 高度之外隐藏的内容。

加宽你当前的html 我认为它没有任何解决方案，除非你不需要滚动那个表格，我对此表示怀疑。

更改 html 我会将您的 .dropdown-menu放在滚动的 div 之外，但是您需要 javaScript 将元素放置在箭头图标下方的正确位置。