[英]How to show a child div without changing the position of that element's siblings?
我有一個登錄表單中的div html標記,該表單中的div顯示了一個錯誤。 錯誤div位於父div的頂部。 觸發錯誤后,我希望錯誤div位於div內,而表單不會關閉,但這不會發生。 我已經在子div中使用了position: absolute
,但是它位於父div的左上角。 我也使用了z-index
,以使子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
為true時,將出現錯誤,並且表單ID大小將變為415px。 我怎么離開#formulatrio
與大小DIV 400px
和#login
DIV到位出現錯誤的時候?
僅供您測試,我添加了背景。
<style>
#formulario {
display: grid;
align-content: center;
width: 400px;
height: 400px;
background: grey;
}
#erro {
position: relative;
width: 100%;
height: 15px;
background: yellow;
text-align: center;
}
</style>
<div id='formulario'>
{this.props.auth.error && <div id='erro'>Nao foi possivel fazer o login!</div>}
<div id='login'>
...
</div>
</div>
增加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>
像這樣嗎
此處的關鍵是將父對象設置為relative
以便孩子知道使用引用。
$('button').on('click', function() { $('#erro').toggle(); });
#formulario { border: 1px solid #EEE; position: relative; } #erro { background-color: rgba(255,0,0,.5); text-align: center; position: absolute; width: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Show/Hide Error</button> <hr> <div id='formulario' style='height: 400px'> <div id='erro' style='height: 15px'>Nao foi possivel fazer o login!</div> <div id='login'> Some<br/> Login<br/> Stuff<br/> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.