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

Question

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

下拉菜单应该如下所示：

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

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

几周来我一直在思考和搜索这个问题，但仍然找不到解决方案。任何帮助将不胜感激，并在此先感谢您。

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 无关。您的选择正在隐藏，因为您 table 的容器隐藏了 overflowY：

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

所以你将无法看到隐藏在div高度之外的东西。

宽度你当前 html 我不认为它有任何解决方案，除非你不需要滚动那个 table，我怀疑。

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

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

Position absolute div hides after going outside of its parent container and into another container

css

css-position

reactjs

react-bootstrap