如何让sticky定位的toast提示框不占用滚动空间？

你的问题根源在于 position: sticky 的特性：它本质是相对定位与固定定位的结合，元素仍会占据文档流中的原有空间，只是在滚动到特定位置时切换为固定状态。要让提示框完全不占用页面空间，需要使用 position: fixed——这个定位方式会让元素完全脱离文档流，不影响其他元素的布局，同时始终固定在视口的指定位置。

修改后的CSS代码如下：

.toast {
  position: fixed; /* 替换sticky为fixed */
  right: 1rem; /* 调整为右侧间距，避免left:100%导致元素超出视口 */
  bottom: 1rem;
  max-width: fit-content;
  background-color: #22bb33;
  color: white;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
}

关键说明： #

• position: fixed：元素脱离文档流，不再占用页面空间，始终相对于视口定位。
• 替换 left: 100% 为 right: 1rem：原 left:100% 会让元素的左边缘对齐视口右边缘，导致整个提示框超出可视区域，改用右侧间距可以让提示框正常显示在右下角。
• 保留其他样式（背景色、内边距等），确保提示框的视觉效果不变。

如果需要保持原有的“滚动到特定位置才显示固定”的逻辑，可以结合JavaScript监听滚动事件，动态切换元素的定位方式或显示状态，但如果只是单纯想让固定的提示框不占空间，position: fixed 是最简单直接的方案。

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