html - 是否可以重叠 div 并将其增长和收缩规则保存在 flex 容器中？

Question

我正在尝试通过事件指示器 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>

Answer 1

一个简单的方法是将 .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>