如何固定Bootstrap第二列（黄色区域）且不改变其原有位置？

嘿，这个问题我之前帮不少开发者踩过坑——当给第二列加position: fixed后它跑到左侧，本质是fixed定位完全脱离了原本的文档流，默认会相对于视口左上角定位，不再继承它在原布局里的位置了。下面给你几个实用的解决思路：

既然fixed是相对视口定位，那我们可以通过left属性把它拉回原本的位置。比如你的第一列宽度是200px，两列之间没有间距，那直接给黄色列加：

.yellow-column {
  position: fixed;
  left: 200px; /* 值等于第一列的宽度 + 列间的间距（如果有的话） */
  top: 0; /* 若需要固定在顶部可加，也能根据需求调整为其他值 */
}

⚠️ 注意：如果第一列是自适应宽度（比如flex布局里的flex-grow），这个方法就不够灵活，得用下面的方案。

当布局用flex实现时，给黄色列加fixed后，它原来的位置会空出来。我们可以在原位置放一个和黄色列宽度一致的占位空div，同时给fixed列设置对应left值：

<div class="container">
  <div class="first-column">第一列内容</div>
  <div class="placeholder"></div> <!-- 占位元素，占住第二列的位置 -->
  <div class="yellow-column">第二列固定内容</div>
  <div class="third-column">第三列内容</div>
</div>

.container {
  display: flex;
}
.first-column {
  flex: 0 0 200px; /* 固定宽度 */
}
.placeholder {
  flex: 0 0 300px; /* 和黄色列宽度一致 */
}
.yellow-column {
  position: fixed;
  left: 200px; /* 第一列宽度 */
  width: 300px;
  top: 0;
}
.third-column {
  flex: 1; /* 自适应剩余宽度 */
}

这样既保留了原布局的结构，又能让固定列停在正确位置，还不会影响后面的内容布局。

如果用Grid布局，我们可以直接指定固定列在网格中的位置，再配合left属性定位：

.container {
  display: grid;
  grid-template-columns: 200px 300px 1fr; /* 三列：第一列200px，第二列300px，第三列自适应 */
}
.yellow-column {
  position: fixed;
  grid-column: 2; /* 指定属于第二列网格 */
  left: 200px; /* 第一列宽度 */
  width: 300px;
  top: 0;
}

Grid的优势是布局结构更清晰，不需要额外加占位元素，网格轨道会自动保留原位置的空间。

额外提醒 #

• 加position: fixed后，列会脱离文档流，后面的内容可能会被它遮挡，记得给后续内容加margin-left或者调整布局避开固定列的区域。
• 如果固定列内容过多超出视口高度，可以给它加overflow-y: auto，让列内部可以滚动，不影响页面整体滚动。

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