css 在另一个 div 之上的绝对位置

Question

我有已知高度的橙色包装纸 div，例如200px.
我的底红色 div 高度未知，例如可根据内部文本调整大小的文本区域。
除了div之外的其他space被蓝色的div拿走了，有卷轴
好吧 我想在红色 div 的正上方放置一个绝对绿色 div。我不知道它的高度。这个 div 应该比蓝色 div 有更多的 z-index，并且在它的底部。

嗯：

我无法使用 bottom: Npx 并将绿色 div 与红色 div 放在同一个容器中。因为我不知道红色 div 和.
我无法使用 top: Npx 并将其与橙色 div 放在同一个容器中，因为包装器（橙色 div）的已知高度 200px 可以缩小，如果设备高度小于 200px。
我无法将它放在蓝色 div 中并使其成为 bottom: 0，因为它有一个卷轴。

.wrapper {
background-color: #ff8000;
 height: 150px;
 display: flex;
 position: relative;
 padding: 10px;
 flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: calc(100% - 20px);
bottom: 40px; /* I don't know the size of bottom div here */
 height: 50px; /* random*/

}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
}

.top-bellow {
  flex-shrink: 1;
 overflow-y: scroll;
 background-color: blue;
}

<div class="wrapper">
 <div class="top-bellow">
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  <div class="unkown-height-top"></div>
  <div class="unkown-height-bottom"></div>
</div>

Answer 1

你可以把它放在红色的div里面然后用bottom:100%

.wrapper {
background-color: #ff8000;
 height: 150px;
 display: flex;
 padding: 10px;
 flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: 100%;
bottom: 100%;
 height: 50px; /* random*/

}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
 position: relative;
}

.top-bellow {
  flex-shrink: 1;
 overflow-y: scroll;
 background-color: blue;
}

<div class="wrapper">
 <div class="top-bellow">
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  
  <div class="unkown-height-bottom">
    <div class="unkown-height-top"></div>
  </div>
</div>

css 在另一个 div 之上的绝对位置

css absolute position on top of another div

css

absolute