css绝对位置使文本框下降

• I build a prototype using chips material-UI.
  • 当我点击Test IPA文本框应显示在文本 Test IPA 的正下方。
  • 在原型中，它立即显示在下面，但是当我包含其他功能时，它显示在底部。
• 我调试了 CSS，这是由于每个场景的绝对位置它显示不同的值并且来自材质 UI。
• 您能告诉我如何针对其他组件修复它吗？
• 下面提供我的代码片段、沙箱和错误屏幕截图。

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

单独正常工作https://codesandbox.io/s/1y2mvo0ol3 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);
}

的父元素.MuiPopover-paper-1706应该有position: relativeCSS 属性。如果没有，则元素position: absolute将相对于具有相对定位的最近父级进行定位。