如何使用CSS position: sticky实现元素固定在父容器右下角

我来帮你搞定这个问题！你想要让内部文本为"Hi!"的<div>始终固定在父容器#flex-div的可视区域右下角，且不随父容器内容滚动，目前的代码有几个小细节需要调整，下面是修正后的方案：

问题分析 #

1. 父容器#flex-div里的positiom是拼写错误，应该是position: relative——这是让sticky元素相对于父容器定位的基础。
2. .sticky-bottom-right只设置了right: 0，缺少bottom: 0，无法固定在底部。
3. Flex布局默认会让子元素拉伸高度，需要让目标元素对齐到容器底部。
4. 存在小语法错误：.flex-item的padding: 30 px多了空格，应为30px。

修正后的完整代码 #

HTML代码 #

<table>
  <thead>
    <tr>
      <th style="width: 90%">Header 1</th>
      <th style="width: 10%">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div id="flex-div">
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="sticky-bottom-right">Hi!</div>
        </div>
      </td>
      <td>more</td>
    </tr>
  </tbody>
</table>

CSS代码 #

table { table-layout: fixed; width: 100%; }
table, th, td { border: 1px solid black; border-collapse: collapse; }
#flex-div { 
  display: flex; 
  justify-content: space-between; 
  overflow: auto; 
  position: relative; /* 修正拼写错误 */
  min-height: 100px; /* 确保容器有基础高度，和flex-item对应 */
}
.flex-item { 
  background-color: beige; 
  border: 1px solid blue; 
  height: 100px; 
  padding: 30px; /* 修正空格问题 */
  text-align: center; 
  min-width: 200px; 
}
.sticky-bottom-right { 
  font-weight: bold; 
  position: sticky; 
  right: 0; 
  bottom: 0; /* 添加bottom属性，固定在底部 */
  align-self: flex-end; /* 在flex布局中对齐到容器底部 */
  background: white; /* 可选：添加背景色避免被滚动内容遮挡 */
  padding: 5px; /* 可选：增加内边距提升视觉效果 */
}

关键原理说明 #

• position: sticky：这个属性会让元素在滚动时，相对于最近的可滚动祖先元素（这里就是#flex-div）固定在指定位置，完美替代position: fixed（后者相对于整个视口）。
• position: relative：父容器必须设置这个属性，确保sticky元素的定位参考是父容器而非更上层元素。
• align-self: flex-end：在Flex布局中，强制目标元素对齐到容器的底部，配合bottom: 0实现垂直方向的固定。
• 可选的背景色：如果滚动的内容会覆盖固定元素，添加背景色可以保证文字清晰可见。

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