- 我使用 chips material-UI 构建了一个原型(prototype)。
- 当我单击测试 IPA 时,文本框应立即显示在文本测试 IPA 下方。
- 在原型(prototype)中,它直接显示在下方,但当我包含其他功能时,它显示在底部。
- 我调试了 CSS,由于每个场景的绝对位置,它显示不同的值,而且它来自 Material 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);
}
最佳答案
.MuiPopover-paper-1706
的父元素应该有 position: relative
CSS 属性。如果不是,则具有 position: absolute
的元素将相对于最近的具有相对定位的父级进行定位。
关于javascript - css position absolute 使文本框下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53265169/