我正在尝试通过事件指示器 div(黄色)制作重叠形式的 div(蓝色)。两个容器都应填充父 div 的所有可用空间,但黄色容器(事件指示器)应与蓝色容器(输入表单)重叠。我尝试将 position: absolute
用于事件 div,但后来我失去了父宽度和高度。我做错了什么,如何解决?
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
.root-wrapper {
width: 300pt;
height: 440pt;
display: flex;
flex-direction: column;
background-color: gray;
}
.logo {
height: 80pt;
background-color: green;
}
.content-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: lightcoral;
padding: 20pt;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.input-form {
position: relative;
flex: 1 1 auto;
background-color: rgb(60, 109, 173);
z-index: 2;
}
.activity-indicator {
position: relative;
flex: 1 1 auto;
background-color: yellow;
z-index: 9;
}
<div class="root-wrapper">
<div class="logo"> </div>
<div class="content-container">
<div class="activity-indicator">
</div>
<div class="input-form">
</div>
</div>
最佳答案
一个简单的方法是将 .input-form
推上去:
position: relative;
top: -100px;
margin-bottom: -100px;
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
.root-wrapper {
width: 300pt;
height: 440pt;
display: flex;
flex-direction: column;
background-color: gray;
}
.logo {
height: 80pt;
background-color: green;
}
.content-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: lightcoral;
padding: 20pt;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.input-form {
position: relative;
top: -100px;
margin-bottom: -100px;
flex: 1 1 auto;
background-color: rgba(60, 109, 173, .5);
z-index: 10;
}
.activity-indicator {
position: relative;
flex: 1 1 auto;
background-color: yellow;
z-index: 9;
}
<div class="root-wrapper">
<div class="logo"> </div>
<div class="content-container">
<div class="activity-indicator">
</div>
<div class="input-form">
</div>
</div>
关于html - 是否可以重叠 div 并将其增长和收缩规则保存在 flex 容器中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59618270/