css位置绝对使文本框下降

IT技术 javascript html css reactjs material-ui
2021-04-16 04:30:26
  • 我使用芯片材料 UI 构建了一个原型。
    • 当我单击测试 IPA 时,文本框应立即显示在文本测试 IPA 下方。
    • 在原型中,它显示在下面,但是当我包含其他功能时,它显示在底部。
  • 我调试了 CSS,这是由于每个场景的绝对位置,它显示不同的值并且它来自材料 UI。
  • 你能告诉我如何相对于其他组件修复它吗?
  • 在下面提供我的代码片段、沙箱和错误截图。

其他组件的问题 https://codesandbox.io/s/qqqk23x3q

在此处输入图片说明

单独正常工作 https://codesandbox.io/s/1y2mvo0ol3

JSX:

<td>
    <ChipsTextbox chipName="test IPA" />
</td>

<Menu id="simple-menu" open={open} onClose={this.handleClose}>
    <TextField onChange={this.onChange} onKeyDown={this.handleKeyPress} />
</Menu>

CSS:

.MuiPopover-paper-1706 {
    outline: none;
    position: absolute;
    min-width: 16px;
    max-width: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 16px;
    max-height: calc(100% - 32px);
}
1个回答

的父元素.MuiPopover-paper-1706应该具有position: relativeCSS 属性。如果不是,则元素position: absolute将相对于最近的具有相对定位的父元素定位。