将固定 div 定位在另一个固定 div 内答案

【问题标题】：Position fixed div inside another fixed div将固定 div 定位在另一个固定 div 内
【发布时间】：2019-08-08 10:13:49
【问题描述】：

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

这里 levelTwo div 是固定的，wrapper levelTemp 是 absolute 将固定的子 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>

【问题讨论】：

如果两者都应该是固定的，那么只有一个需要固定，另一个可以简单地是绝对的。
是的，你是对的，谢谢 :)

标签： html css

【解决方案1】：

使用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>

【讨论】：

【解决方案2】：

这就是你想要的？

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

【讨论】：