CSS位置绝对使文本框下降

Question

• 我使用芯片Material-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);
}

Answer 1

.MuiPopover-paper-1706的父元素应具有position: relative CSS属性。如果不是这样，则具有相对位置的position: absolute元素将相对于最近的父对象定位。