CSS Position 材质 UI 菜单项在其父项下方

Question

我有一个 Material UI 对话框，它只包含一些文本和一个带有菜单选项下拉菜单的图标。 演示可以在这里看到： https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js

我正在尝试 position Menu组件，以便在单击它时它显示在Settings组件的正下方。 我在父元素（即Settings图标）上指定了position: relative以及position: absolute with top: -10px到子元素（即Menu组件），但这似乎不起作用。

如何进行设置，以便在单击“设置”图标时，菜单直接显示在“设置”下方，以及在调整 window 的大小以使菜单跟随时出现？

编辑：

如果打开代码框有任何问题，这就是我所拥有的。

应用程序.js ：

import "./styles.css";

import { useState } from "react";

import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  ListItemText,
  Menu,
  MenuItem
} from "@material-ui/core";
import Settings from "@material-ui/icons/Settings";

export default function App() {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div className="App">
      <h1 className="blueFont">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Dialog fullWidth maxWidth="sm" open={true} hideBackdrop={true}>
        <DialogTitle style={{ height: "60px" }}>My title</DialogTitle>
        <DialogContent>My Content</DialogContent>

        <Divider style={{ width: "100%" }} />
        <DialogActions>
          <div className="settings">
            <Settings onClick={() => setOpenMenu(!openMenu)} />
            <div className="menu">
              <Menu open={openMenu}>
                <MenuItem>
                  <ListItemText>First option</ListItemText>
                </MenuItem>
                <MenuItem>
                  <ListItemText>Second option</ListItemText>
                </MenuItem>
              </Menu>
            </div>
          </div>
        </DialogActions>
      </Dialog>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.blueFont {
  color: blue;
}

.settings {
  position: relative;
}

.menu {
  position: absolute;
  top: -10px;
}

Answer 1

您也可以参考文档

https://mui.com/components/menus

我还创建了一个沙箱

https://codesandbox.io/s/elastic-hooks-0fi6z?file=/src/App.js

 const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

<DialogActions>
          <div>
            <Button id="basic-button" onClick={handleClick}>
              Dashboard <Settings />
            </Button>
            <Menu
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
            >
              <MenuItem onClick={handleClose}>Profile</MenuItem>
              <MenuItem onClick={handleClose}>My account</MenuItem>
              <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
          </div>
        </DialogActions>