Question

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

嗯：

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

CSS绝对位置在另一个div的顶部

1 个答案: