仅用CSS能否在网格中正确堆叠定位多个sticky元素？

我有两个独立元素，大屏尺寸下它们处于同一CSS Grid列中，希望能实现类似“同一父容器内设置position: sticky”的效果；但不能给HTML添加额外容器——因为窄屏宽度下，网格布局会变化，这两个元素需要处于网格的不同区域。

大屏尺寸效果示例 #

main {
  min-height: 300vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  margin-bottom: 100vh;
}

.c1 {
  background: linear-gradient(green, blue);
  grid-column: 1;
  grid-row: 1;
}

/* 大屏时两个元素（Hello/World）在同一列的.c2容器内，实现sticky */
.c2 {
  align-self: start;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
}

.c2 div {
  padding: 30px 0;
}

<main>
  <div class="c1"></div>
  <div class="c2">
    <div>Hello</div>
    <div>World</div>
  </div>
</main>

窄屏尺寸效果示例 #

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
}

.c1 {
    background: linear-gradient(green, blue);
    min-height: 50vh;
    grid-row: 2;
    grid-column: 1;
}

/* 窄屏时两个元素分开在不同网格行 */
.c2 {
    grid-row: 1;
    grid-column: 1;
}

.c3 {
    grid-row: 3;
    grid-column: 1;
}

<main>
  <div class="c1"></div>
  <div class="c2">Hello</div>
  <div class="c3">World</div>
</main>

可见，若在大屏时用父容器包裹这两个元素以实现sticky效果，窄屏时无法将它们分到不同行。且元素高度不固定，为第二个元素设置固定top值的方案不可行，还会出现父网格滚出视图时元素重叠的问题。请问是否存在纯CSS实现该效果的方法，还是必须通过JavaScript修改DOM？

可以通过为两个独立元素分别设置position: sticky，并利用动态top值关联元素位置来实现，无需额外容器或JS操作DOM。

核心思路 #

1. 大屏布局时，将两个元素放在同一Grid列和行，分别设置position: sticky；
2. 第一个元素设top: 0，第二个元素用top: 100%配合负外边距，实现基于前一个元素的堆叠粘性；
3. 窄屏布局时，重置元素定位属性，分配到不同Grid行即可。

完整代码示例 #

/* 大屏布局 */
@media (min-width: 769px) {
  main {
    min-height: 300vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 100vh;
  }

  .c1 {
    background: linear-gradient(green, blue);
    grid-column: 1;
    grid-row: 1;
  }

  .c2, .c3 {
    grid-column: 2;
    align-self: start;
    position: sticky;
    padding: 30px 0;
  }

  .c2 {
    top: 0;
    grid-row: 1;
  }

  .c3 {
    /* 基于.c2底部定位，实现堆叠粘性 */
    top: 100%;
    grid-row: 1;
    /* 抵消自身高度，避免初始位置偏移 */
    margin-top: -100%;
  }
}

/* 窄屏布局 */
@media (max-width: 768px) {
  main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .c1 {
    background: linear-gradient(green, blue);
    min-height: 50vh;
    grid-row: 2;
    grid-column: 1;
  }

  .c2 {
    grid-row: 1;
    grid-column: 1;
    position: static;
    padding: 0;
  }

  .c3 {
    grid-row: 3;
    grid-column: 1;
    position: static;
    padding: 0;
    margin-top: 0;
  }
}

<main>
  <div class="c1"></div>
  <div class="c2">Hello</div>
  <div class="c3">World</div>
</main>

原理说明 #

• 大屏时，.c2和.c3处于同一Grid区域，position: sticky让它们基于视口粘性定位；.c3的top: 100%会参照.c2的底部位置，配合负外边距让它初始时紧跟在.c2下方，滚动时保持堆叠效果。
• 窄屏时，重置元素为默认定位，分配到不同Grid行，满足响应式布局需求。

这个方案无需额外DOM容器，纯CSS即可实现，且适配元素高度不固定的场景，不会出现父网格滚出时的重叠问题。

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