css位置绝对使文本框下降

Posted 2023-03-06

【中文标题】css位置绝对使文本框下降

【英文标题】：css position absolute making the textbox go down

【发布时间】：2019-04-15 08:26:10

【问题描述】：

我使用芯片材料-UI 构建了一个原型。 当我点击

Test IPA

时，文本框应立即显示在 Test IPA 文本下方。 在原型中，它立即显示在下方，但当我包含其他功能时，它显示在底部。 我调试了 CSS，由于每个场景的绝对位置，它显示不同的值并且它来自材质 UI。 您能告诉我如何解决其他组件的问题吗？ 在下面提供我的代码 sn-p、沙箱和错误截图。

其他组件的问题 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: relative CSS 属性。如果不是，则带有position: absolute 的元素将相对于最近的具有相对定位的父元素进行定位。