如何让元素处于文档流内且滚动时固定在屏幕位置？

要让.fixedOnScreen元素既保留文档流中的占位，又在页面滚动时固定在屏幕同一位置，不能直接用position: fixed（因为它会脱离文档流），可以通过「占位元素 + 固定定位内容元素」的组合来实现，具体如下：

HTML 结构调整 #

在原.fixedOnScreen元素的位置先放置一个占位元素，用来维持文档流布局，再将固定显示的内容元素放在旁侧：

<div>
...
   <div>
      <div class="fixed-placeholder"></div>
      <div class="fixedOnScreen">I'm always at the same screen position</div>
   </div>
</div>

CSS 样式设置 #

/* 占位元素：和固定元素保持一致的尺寸，维持文档流占位 */
.fixed-placeholder {
  width: 220px; /* 包含内边距的总宽度 */
  height: 70px; /* 包含内边距的总高度 */
  margin: 10px 0;
}

/* 固定元素：固定在屏幕指定位置，覆盖占位区域 */
.fixedOnScreen {
  position: fixed;
  top: 110px; /* 对应占位元素的初始顶部位置 */
  left: 60px; /* 对应占位元素的初始左侧位置 */
  width: 200px;
  padding: 10px;
  height: 50px;
  margin: 10px 0;
  background-color: #ffffff; /* 用背景色遮挡下方滚动的内容 */
}

动态适配尺寸（可选） #

如果元素尺寸是动态变化的，用 JavaScript 自动同步占位元素和固定元素的尺寸：

const fixedEl = document.querySelector('.fixedOnScreen');
const placeholder = document.querySelector('.fixed-placeholder');

function updatePlaceholderSize() {
  const { width, height } = fixedEl.getBoundingClientRect();
  placeholder.style.width = `${width}px`;
  placeholder.style.height = `${height}px`;
}

// 页面加载和窗口大小变化时更新尺寸
window.addEventListener('load', updatePlaceholderSize);
window.addEventListener('resize', updatePlaceholderSize);

这种方案的核心逻辑是：用占位元素占据文档流中的原有位置，保证其余布局不受影响；同时用position: fixed的元素显示内容，实现滚动时固定在屏幕上的效果。

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