调整窗口大小时，div相对于顶部向上移动？

Question

好吧，我在这里有一个band G：

#outercontainer {
  width: 85%;
  margin-left: 3%;
  margin-top: 10%;
  font-family: 'Teko', sans-serif;
  border: solid 1pt lightgray;
  padding: 5%;
}

#bandR {
  width: 90%;
  height: 30%;
  background-color: darkred;
  opacity: .1;
  position: absolute;
  right: 10%;
  z-index: -5;
  margin-top: 4%;
}

#bandG {
  width: 95%;
  height: 40%;
  background-color: lightgray;
  opacity: 1;
  position: absolute;
  left: 5%;
  top: 190%;
  z-index: -5;
}

<div id="outercontainer">

  <div id="bandR">
  </div>
  <div id="bandG">
  </div>

  <div class="text">
    <strong>Foraging</strong>

当我调整页面大小时，问题发生了，bandG相对于顶部移动，而与底部之间没有保持静态距离。我尝试将其相对于底部设置一个百分比，但最终在页面顶部。

我现在来自：

到

调整大小时。如何保持与底部的静态距离？

Answer 1

我不知道我是否正确回答了您的问题，如果我理解正确，尽管调整了大小，您还是希望两个框都固定好。

我想到了这个

#outercontainer {
  width: 85%;
  margin-left: 3%;
  margin-top: 10%;
  font-family: 'Teko', sans-serif;
  border: solid 1pt lightgray;
  padding: 5%;
}

#outercontainer:before {
  content: ' ';
  width: 90%;
  height: 30%;
  background-color: darkred;
  opacity: .1;
  position: absolute;
  right: 10%;
  z-index: -5;
  margin-top: 4%;
}

#outercontainer:after {
  content: ' ';
  width: 95%;
  height: 40%;
  background-color: lightgray;
  opacity: 1;
  position: absolute;
  left: 5%;
  top: 190%;
  z-index: -5;
}

<div id="outercontainer">

  <div id="bandR">
  </div>
  <div id="bandG">
  </div>

  <div class="text">
    <strong>Foraging</strong>
  </div>
</div>

使用伪选择器会将内容保留在其位置。