CSS 如何解决DOM操作添加待办项时指定元素被向上推移的问题

问题根因 #

你设置的position: sticky未生效，同时整个页面内容高度溢出后整体滚动，才会导致头部元素被顶出视口。

修复步骤 #

1. 补全sticky定位的必要参数
   sticky定位必须指定top/right/bottom/left至少一个阈值才会生效，同时建议增加层级和背景色避免内容透显，修改后的头部代码如下：

<div class="d-flex justify-content-center mb-3" style="position: sticky; top: 0; background: #ffffff; z-index: 99;">
  <img class="logo" src="/img/planning.svg" alt="tasktracker-logo">
</div>

2. 给待办列表增加独立滚动区域
   不要让整个页面跟随内容高度变化滚动，单独给待办列表的父容器设置最大高度和纵向滚动属性：

/* 替换成你实际的待办列表父容器选择器 */
.todo-list-wrapper {
  /* 数值可以根据你头部logo+输入区域的实际总高度调整 */
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

3. 排查父元素属性
   检查当前sticky元素的所有祖先节点，不要设置overflow: hidden/auto/scroll属性，这类属性会导致sticky定位失效。

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