如何在任意类型网页左侧插入不遮挡原内容的侧边栏？

核心要避开绝大多数方案的通病：不要使用fixed/absolute定位做侧边栏——这类定位会脱离正常文档流，必然会遮挡原页面内容，靠偏移补正永远适配不完所有页面的布局。
真正跨所有网页通用的方案是从根节点修改文档流，利用Flex布局的自动排列特性实现挤压效果，不需要针对特定页面做适配：

• 第一步：重置根节点布局
  直接操作<html>和<body>两个顶级节点，强制设置为横向Flex布局，先把整个页面的排列规则改成横向两列，同时保存原节点的内联样式，方便后续还原。

  const html = document.documentElement;
  const body = document.body;
  // 缓存原样式
  const originStyleCache = {
    html: html.style.cssText,
    body: body.style.cssText
  };
  // 根节点强制横向Flex
  html.style.cssText += `
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
  `;
  // 原页面内容区作为弹性项自动占满剩余宽度
  body.style.cssText += `
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 100vh;
    overflow: auto !important;
    margin: 0 !important;
    position: relative !important;
  `;
  

• 第二步：注入侧边栏节点
  侧边栏作为Flex的固定宽度项插入，不要加任何脱离文档流的定位属性，靠order: -1强制排在最左侧。

  const sidebar = document.createElement('div');
  const SIDEBAR_WIDTH = '380px'; // 可按需修改宽度
  sidebar.style.cssText = `
    order: -1;
    flex: 0 0 ${SIDEBAR_WIDTH};
    width: ${SIDEBAR_WIDTH};
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    z-index: 2147483647; // 保证侧边栏内部内容层级最高
  `;
  body.prepend(sidebar);
  

• 第三步：少量兼容处理覆盖边缘场景
  • 遍历页面内所有position: fixed的元素，给原本设置left: 0的元素增加等于侧边栏宽度的左偏移，避免这类固定元素被侧边栏盖住；如果是全屏遮罩、弹窗类fixed元素，强制设置left: 0; width: 100vw保证覆盖全视口
  • 不需要手动修改原页面任何内部元素的宽度，Flex布局的min-width:0规则会自动触发原内容收缩，所有内容都会被限制在剩余宽度内渲染，不会出现横向溢出遮挡侧边栏的问题

这个方案的通用性在于：它没有侵入原页面的内部布局逻辑，只是把整个原页面整体作为一个弹性区块放在了Flex容器里，和侧边栏平级排列，不管原页面用的是浮动、Grid、老式表格布局还是静态流布局，都会被限制在自身区块的宽度内自动适配，不会出现遮挡问题。

如果需要移除侧边栏，直接删除侧边栏节点，把之前缓存的html和body的原样式还原即可，不会残留对原页面的修改。

内容的提问来源于stack exchange，提问作者Consider Non-Trivial Cases