Ant Design Layout设置fixed定位Sider时内部内容溢出覆盖问题

元素设置position: fixed后会脱离正常文档流，不再占据原布局中的空间，所以原本紧随其后的内层Content会自动填充Sider空出来的左侧位置，导致宽度撑满外层容器、内容覆盖Sider的问题。

• 方案1：给内层Content添加对应宽度的左侧边距
  直接给内层Content设置和Sider宽度一致的margin-left即可规避重叠，代码可修改为：

<Content
    width="75%"
    style={{
        overflow: 'auto',
        marginLeft: '25%', // 与Sider宽度完全对齐
    }}
>

• 方案2：给外层Content容器设置左侧内边距
  如果你不想修改内层Content的样式，也可以给包裹Sider和内层Content的外层Content节点添加padding-left，值与Sider宽度一致：

// 外层Content（包裹Sider和内层Content的节点）样式
style={{
  paddingLeft: '25%',
  position: 'relative'
}}

• 方案3：使用组件库内置的固定属性（如果是Ant Design等组件库的Layout组件）
  你使用的Sider、Content组件大概率是Ant Design的Layout相关组件，组件本身已经封装了固定侧边栏的能力，不需要手动写position样式，直接给Sider添加fixed属性即可，组件会自动处理Content的边距适配：

<Sider
    width="25%"
    fixed={true}
    style={{
        overflow: 'auto',
        height: '100vh',
    }}
>

• 如果你的Header是固定在顶部的，需要给Sider添加top: [Header高度]的样式，避免Sider和顶部Header重叠
• 如果Sider支持折叠切换宽度，需要把Sider宽度存为状态变量，同时绑定到对应边距属性上，折叠时同步修改边距值

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