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

Question

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

嗯:

• 我不能使用 bottom: Npx 并将绿色 div 与红色 div 放在同一个容器中。因为我不知道红色 div 和的大小。
• 我不能使用 top: Npx 并将其放在与 orange div 相同的容器中，因为如果设备高度小于 200px，包装器(orange div)的已知高度 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>