另一个div顶部的css绝对位置

Question

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

嗯：

• 我不能使用bottom: Npx 并将绿色 div 与红色 div 放在同一个容器中。因为我不知道红色 div 的大小和。
• 我不能使用top: Npx 并将其放置在与橙色 div 相同的容器中，因为如果设备高度小于 200 像素，包装器（橙色 div）的 200 像素的已知高度可能会缩小。
• 我不能将它放在蓝色 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>