如何将元素固定在可滚动的position:fixed容器底部？

问题原因 #

position: absolute 定位的元素，bottom: 0 是相对于其定位父级（此处为设了position: fixed的.container）的整体滚动内容高度的底部，而非容器可视区域的底部。当容器内容溢出触发滚动时，绝对定位的元素会跟随整体内容一起滚动，无法固定在屏幕可见区域的底部。

解决方案 #

方案1：拆分DOM结构（兼容性最优，推荐）

将可滚动的商品内容与固定底部分为两个平级子节点，把滚动逻辑交给内容层处理，不改动容器原有的position: fixed属性。
修改后的HTML：

<div class='container'>
  <!-- 新增可滚动内容层 -->
  <div class="scroll-content">
    <div>hello world </div>
    <div>hello world </div>
    <!-- 其余所有hello world节点都放在此处 -->
    <div>hello world </div>
  </div>
  <div class='child'>
    asdf
  </div>
</div>

修改后的CSS：

.container {
  background: red;
  height: 100%;
  width: 200px;
  position: fixed;
  /* 移除原容器的overflow: auto，交给内容层处理滚动 */
}
.scroll-content {
  height: 100%;
  overflow: auto;
  /* 预留底部固定元素的高度，避免底部内容被遮挡 */
  padding-bottom: 40px;
  box-sizing: border-box;
}
.child {
  background: green;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px; /* 按需调整高度，和上方padding-bottom对应即可 */
}

方案2：无需修改DOM，使用sticky定位

如果不想调整现有结构，直接修改.child的定位属性即可，适配所有现代浏览器（IE11及以上支持）：

.child {
  background: green;
  /* 把absolute替换为sticky */
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

position: sticky定位的元素会在滚动到设定位置时，吸附在最近的滚动祖先的可视区对应位置，刚好满足购物车弹窗底部固定的需求。

内容的提问来源于stack exchange，提问作者Embedded_Mugs