如何正确显示新内容区块？寻求position:absolute替代方案

问题核心 #

使用position: absolute会让右侧视频栏脱离文档流，导致后续新增内容无法被该元素"撑开"，只能重叠在它下方，看起来像是始终显示在首页。我们需要在保留视频栏布局效果的同时，让它留在文档流中，确保后续内容正常排列。

可行替代方案 #

方案1：CSS Grid布局（推荐，适配响应式） #

将页面主体包裹在Grid容器中，把左侧内容和右侧视频栏分成两列，视频栏高度设为100vh但不脱离文档流：

1. 给父容器添加Grid样式：

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 33.333%; /* 对应Bootstrap col-lg-4的1/3宽度比例 */
}

2. 修改右侧视频栏的CSS，移除绝对定位相关属性：

.col-lg-4.p-0 {
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  /* 移除position:absolute、top、right */
}

3. 后续新增内容可以放在page-wrapper容器外部，或者通过grid-column: 1 / -1让它跨两列显示：

<div class="page-wrapper">
  <!-- 左侧内容 -->
  <div class="col-lg-8">...</div>
  <!-- 右侧视频栏 -->
  <div class="col-lg-4 p-0">...</div>
</div>
<!-- 后续新增内容 -->
<h1>new part</h1>

响应式适配：在移动端自动切换为单列布局，避免视频栏占据整屏高度：

@media (max-width: 991px) {
  .page-wrapper {
    grid-template-columns: 1fr;
  }
  .col-lg-4.p-0 {
    height: 250px; /* 自定义适合移动端的高度 */
  }
}

方案2：Flex布局 + 自动margin #

通过Flex布局将视频栏推到右侧，同时保留在文档流内：

1. 父容器添加Flex样式：

.page-wrapper {
  display: flex;
  width: 100%;
}

2. 修改右侧视频栏的CSS：

.col-lg-4.p-0 {
  width: 33.333%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  margin-left: auto; /* 自动左外边距将元素推到右侧 */
  /* 移除position:absolute、top、right */
}

3. 后续内容放在page-wrapper外部即可正常显示。

方案3：position: sticky（适合需要滚动时固定视频栏的场景） #

如果希望视频栏在页面滚动时始终固定在视口右侧，同时不影响后续内容布局，可以用position: sticky替代：

.col-lg-4.p-0 {
  height: 100vh;
  right: 0;
  top: 0;
  pointer-events: none;
  overflow: hidden;
  position: sticky;
  align-self: flex-start; /* 配合Flex布局确保定位生效 */
}

这种方式下，视频栏会留在文档流中，后续内容会在它下方正常排列，滚动时视频栏会固定在视口顶部。

为什么这些方案有效 #

• Grid/Flex布局下，视频栏属于文档流的一部分，页面会自动为后续内容预留空间，不会出现重叠。
• position: sticky既保留了固定位置的效果，又不会完全脱离文档流，后续内容会正常识别它的占位。

内容的提问来源于stack exchange，提问作者SZENTIOSZ the SZAMOSZ