这个问题我处理过很多次啦，核心原因是当粘性元素触发固定定位状态时，它在文档流中的占位会“消失”，导致下方的item会向上填充它原来的位置，最终造成重叠。结合你的代码，咱们来一步步解决：

首先先看你的原始代码（方便对照）：

原始CSS #

.container { width: 100%; height: 500px; background: yellow }
.sticky { position: sticky; top: 0; height: 50px; }
.item { margin-top: 20px }

原始HTML #

<div class="container">
  <div class="sticky"> sticky el </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
</div>

方案一：给内容包裹层添加顶部内边距（推荐） #

这是最直观且易维护的方法，只需要给所有item套一个容器，然后给这个容器设置等于粘性元素高度的padding-top，这样不管粘性元素是否处于固定状态，下方内容都会预留出足够的空间：

修改后的CSS #

.container { width: 100%; height: 500px; background: yellow; overflow: auto; } /* 加上overflow:auto让容器可滚动 */
.sticky { position: sticky; top: 0; height: 50px; background: #ccc; } /* 加个背景方便区分粘性元素 */
.items-wrapper { padding-top: 50px; /* 和sticky的高度完全一致 */ }
.item { margin-top: 20px }

修改后的HTML #

<div class="container">
  <div class="sticky"> sticky el </div>
  <div class="items-wrapper">
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
    <div class="item"> fdsfdsf </div>
  </div>
</div>

方案二：用占位元素预留空间 #

如果不想修改太多HTML结构，可以给粘性元素添加一个等高的占位元素，通过负margin让粘性元素覆盖占位位置，这样占位元素始终在文档流中占据空间，避免item向上偏移：

修改后的CSS #

.container { width: 100%; height: 500px; background: yellow; overflow: auto; }
.sticky-placeholder { height: 50px; /* 和sticky高度完全一致 */ }
.sticky { position: sticky; top: 0; height: 50px; background: #ccc; margin-top: -50px; }
.item { margin-top: 20px }

修改后的HTML #

<div class="container">
  <div class="sticky-placeholder"></div>
  <div class="sticky"> sticky el </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
  <div class="item"> fdsfdsf </div>
</div>

补充说明：我给.container加了overflow: auto，因为你的容器设置了固定高度，只有开启滚动才能触发粘性定位的效果哦～

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