如何使用CSS实现始终覆盖内容可见的粘性全屏竖线

实现方案 #

和React-Bootstrap样式无冲突，通过固定定位+高层级即可实现需求，具体代码如下：

1. 核心CSS代码 #

.fixed-vertical-line {
  /* 固定定位，全程跟随视口显示 */
  position: fixed;
  /* 竖线位置，可按需调整left/right值修改位置 */
  left: 24px;
  top: 0;
  /* 高度撑满整个视口 */
  height: 100vh;
  /* 竖线宽度，可自定义 */
  width: 2px;
  /* 竖线颜色，参考示例为浅灰色，可按需修改 */
  background-color: #e5e5e5;
  /* 层级高于React-Bootstrap所有默认组件（Bootstrap默认modal层级为1055），确保始终在上层 */
  z-index: 9999;
  /* 忽略鼠标事件，避免遮挡下方内容的点击、悬浮等交互 */
  pointer-events: none;
}

2. React项目内使用方式 #

将上面的CSS写入全局样式文件后，直接在根组件（如App.jsx）中插入元素即可全局生效：

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'; // 上述CSS写在该全局样式文件中

function App() {
  return (
    <div className="App">
      {/* 全局竖线元素 */}
      <div className="fixed-vertical-line"></div>
      {/* 其余业务代码、React-Bootstrap组件正常写即可 */}
    </div>
  );
}

export default App;

可选调整说明 #

• 如需调整竖线位置，直接修改left/right属性值即可
• 如果项目中有自定义更高层级的组件，同步调高z-index值即可保证竖线始终显示在上层

内容的提问来源于stack exchange，提问作者Barış Yerlikaya