CSS位置绝对使文本框下降 [英] css position absolute making the textbox go down

问题描述

• 我使用芯片Material-UI构建了一个原型.
  • 当我点击测试IPA 时，该文本框应立即显示在测试IPA"文本下方.
  • 在原型中，它立即显示在下面，但是当我包含其他功能时，它显示在底部.
  • I build a prototype using chips material-UI.
    • When I click the Test IPA the textbox should show immediately below the text Test IPA.
    • In the prototype, it shows immediately below but whereas when I include with other functionalities, it's showing at the bottom.

    其他组件的问题 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的元素将被定位为相对的，具有相对位置的最近的父元素.

    The parent element of the .MuiPopover-paper-1706 should have position: relative CSS attribute. If it doesn't then the element with position: absolute will be positioned relatively the nearest parent with relative positioning.

    这篇关于CSS位置绝对使文本框下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！