是否可以在flex容器中重叠div并保存其增长和收缩规则？
是否可以在flex容器中重叠div并保存其增长和收缩规则？
提问于 2020-01-07 04:05:30
我正在尝试通过活动指示器div (黄色)创建一个重叠形式div (蓝色)。两个容器都应该填满父div的所有可用空间，但黄色容器(活动指示器)应该与蓝色容器(输入表单)重叠。我试着用position: absolute来做activity，但是失去了父元素的宽度和高度。我做错了什么，怎么才能改正呢？
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>
回答 1
Stack Overflow用户
发布于 2020-01-07 04:47:11
一种简单的方法是使用以下命令来推动.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59618270
复制相关文章
相似问题
腾讯云开发者
