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

Question

好的，我在这里有一个divG：

#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>

使用伪选择器会将事物保存在他们的位置。