javascript - 如何在不改变该元素 sibling 位置的情况下显示子 div？

Question

我有一个来自登录表单的 div html 标记，该表单内有一个显示错误的 div。错误 div 位于父 div 的顶部。当错误被触发时，我希望错误 div 位于表单 div 内，而表单不会下降，但事实并非如此。我已经在子 div 中使用了 position: absolute，但它位于父 div 的左上角。我也使用了 z-index，因此子 div 位于父 div 之上，但父 div 总是下降一个像素高度，该像素高度与子 div 的大小相同。让我向您展示示例:

<div id='formulario'  style={{height: 400px}}>
    {this.props.auth.error && <div id='erro'  style={{height:'15px'}}>Nao foi possivel fazer o login!</div>}
    <div id='login'>
    ...
   </div>
</div>

当this.props.auth.error为真时，出现错误，表单id大小变为415px。出现错误时，如何保留 #formulatrio 大小为 400px 的 div 和 #login div？

Answer 1

增加top CSS属性将登录div下移到某个位置， 为可视化添加了背景。

class MaintainPosition extends React.Component {
  render() {
    return (
      <div
        id="formulario"
        style={{ height: "400px", backgroundColor: "lightblue" }}
      >
        {this.props.auth.error && (
          <div id="erro" style={{ height: "15px", color: "red" }}>
            Nao foi possivel fazer o login!
          </div>
        )}
        <div id="login">
            scroll down to toggle error
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: true
    };
  }
  render() {
    return (
      <div className="App">
        <MaintainPosition auth={{ error: this.state.error }} />
        <button onClick={() => this.setState({ error: !this.state.error })}>
          toggle error
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

#err {
  
}

#formulario {
  position: relative;
}

#login {
  position: absolute;
  width: 100%;
  top: 20px;
  background-color: gray;
}

#root {text-align: center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


	<div id="root"></div>