将固定div放置在另一个固定div中

Question

我正在尝试将固定div与另一个固定div的底部对齐。我在stackoverflow上看到过，我们可以使用绝对div作为包装器来定位固定的div

在这里，levelTwo div是固定的，包装器levelTemp是绝对值，以将固定子div对齐到底部，levelThree是固定子div。
对我来说，预期的输出应该是这样的：

却是这样的：


解决方案1：
一种方法是将levelTemp div的高度指定为50px，但在我的情况下，levelThree div的高度可以变化。

.levelOne {
    position: relative;
}

.levelTwo {
    height: 150px;
    width: 150px;
    background: gray;
    position: fixed;
    right: 0;
}

.levelTemp {
    position: absolute;
    bottom: 0;
}

.levelThree {
    height: 50px;
    width: 50px;
    background: red;
    position: fixed;
}

<div class="levelOne">
    <div class="levelTwo">
        <div class="levelTemp">
            <div class="levelThree">

            </div>
        </div>
    </div>
</div>

Answer 1

这就是你想要的吗？

.levelTemp {
   /* bottom: 0; */
   /* overflow: hidden; */
   bottom: 0;
   position: absolute;
 }
 .levelThree {
   height: 50px;
   width: 50px;
   background: red;
   /* position: fixed; */
   /* bottom: 0; */
  }

Answer 2

使用position:fixed

body {
  margin: 0;
}

.levelOne {
  position: relative;
}

.levelTwo {
  height: 150px;
  width: 150px;
  background: gray;
  position: fixed;
  right: 0;
}

.levelTemp {
  position: absolute;
  bottom: 0;
}

.levelThree {
  height: 50px;
  width: 50px;
  background: red;
  position: fixed;
  top: 100px;
}

<div class="levelOne">
  <div class="levelTwo">
    <div class="levelTemp">
      <div class="levelThree">

      </div>
    </div>
  </div>
</div>

使用position:absolute;

body {
  margin: 0;
}

.levelOne {
  position: relative;
}

.levelTwo {
  height: 150px;
  width: 150px;
  background: gray;
  position: absolute;
  right: 0;
}

.levelTemp {
  position: relative;
  height: 100%;
  width: 100%;
}

.levelThree {
  height: 50px;
  width: 50px;
  background: red;
  position: absolute;
  bottom: 0;
}

<div class="levelOne">
  <div class="levelTwo">
    <div class="levelTemp">
      <div class="levelThree">

      </div>
    </div>
  </div>
</div>