Popper 菜单上的 Z-Index？

Question

我有一个重现此问题的工作示例on codesandbox.io。

我想做的是将 'sit below' 菜单作为 demonstrated on the Material-UI documentation.

   return (
      <div className={classes.root}>
        <div>
          <Button
            buttonRef={node => {
              this.anchorEl = node;
            }}
            aria-owns={open ? "menu-list-grow" : null}
            aria-haspopup="true"
            onClick={this.handleToggle}
          >
            Toggle Menu Grow
          </Button>
          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
            {({ TransitionProps, placement }) => (
              <Grow
                {...TransitionProps}
                id="menu-list-grow"
                style={{
                  transformOrigin:
                    placement === "bottom" ? "center top" : "center bottom"
                }}
              >
                <Paper>
                  <ClickAwayListener onClickAway={this.handleClose}>
                    <MenuList>
                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                    </MenuList>
                  </ClickAwayListener>
                </Paper>
              </Grow>
            )}
          </Popper>
        </div>

        <Button color="default" variant="contained">
          {" "}
          I'm a button that sits under the menu
        </Button>
      </div>
    );

我遇到的问题是菜单中 DOM 下方的按钮始终位于顶部。

我尝试手动将 zIndex 添加到菜单的各个部分 - 但无济于事。

我怀疑这个问题与转换有关。

谁能解释一下这是怎么回事，我该如何解决？

Answer 1

我删除了 Popper 组件上的 disablePortal 道具：

<Popper open={open} anchorEl={this.anchorEl} transition disablePortal>

现在变成

<Popper open={open} anchorEl={this.anchorEl} transition>

请参阅 Material-UI 文档以了解 Popper component disablePortal prop 的原因：

Disable the portal behavior. The children stay within it's parent DOM hierarchy.

默认情况下，Popper 组件使用 React Portal API : https://reactjs.org/docs/portals.html

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component

使用 React Portal API，Material-UI Popper 组件默认在父树的 DOM 层次结构之外呈现，这解释了它解析的原因叠加问题。

修改后的工作代码在codesandbox.io

Answer 2

根据@Ricovitch 的建议，从 Popper 元素中删除 disablePortal 属性或将其值设置为 false <Popper open={open} anchorEl={this.anchorEl} transition disablePortal={false}>

如material-ui popper scroll playground示例所示，当disablePortal为false时，弹出元素附加到body元素，即默认行为。例如，您的 HTML 结构将如下所示：

<body>
    ... existing elements ...
    <parent>
        <button onClick={openMenu}/>
    </parent>
    ... more elements ...
    ... attached popup menu for Popper ...
</body>

但是，当您将 disablePortal 设置为 true 时，它将具有以下 html 结构：

<body>
    ... existing elements ...
    <parent>
        <button onClick={openMenu}/>
        ... attached popup menu for Popper ...
    </parent>
    ... more elements ...
</body>

我希望这能让事情更清楚！

Answer 3

如果有人仍然希望更改 z-index 或者如果您想保留 disablePortal 请尝试以下方法。

方法一

给 Popper 一个 id

<Popper id='popper-1' .... />

现在在您的 CSS 文件中

#popper-1 {
 z-index: 5; // or anything higher
}

方法二

使用 style prop

在 Popper 本身中设置 z-index

z-index 工作代码（启用 disablePortal）here

Answer 4

对我来说，以下解决方案有效：将 zIndex 添加到 popper。

<Popper style={{zIndex: 10000}} open={open} anchorEl={this.anchorEl} transition disablePortal>

对我来说，删除 disablePortal 没用

Answer 5

移动步进器：1000 快速拨号：1050 应用栏：1100 抽屉：1200 模态：1300 小吃店：1400 工具提示：1500

<Popper style={{ zIndex: 1900 }} open={open1} anchorEl={anchorRef1.current} role={undefined} transition disablePortal>any thing in the popper </Popper>

Popper 菜单上的 Z-Index？

Z-Index on Popper menu?

javascript

z-index

reactjs

material-ui