使用position: fixed时，如何避免Angular项目中菜单与组件重叠？

方案一：给右侧内容容器加左侧边距 #

你的菜单宽度是14rem，直接给右侧的.vsk__column容器设置和菜单宽度一致的左外边距，就能让内容避开fixed菜单的区域，避免重叠。

修改后的SCSS代码：

.#{css-namespace}column{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    margin-bottom: 1rem;
    margin-left: 14rem; // 新增此行，与菜单宽度匹配
}

方案二：用父容器包裹并设置内边距 #

给菜单和内容套一个父容器，通过父容器的左内边距预留出菜单的位置，同样能解决重叠问题：

先调整HTML结构，新增父容器：

<div class="admin-layout">
  <dash-admin-menu></dash-admin-menu>
  <div class="vsk__column">
    <dash-create-activity></dash-create-activity>
    <dash-create-partner></dash-create-partner>
    <dash-create-resort></dash-create-resort>
  </div>
</div>

再添加对应SCSS样式：

.admin-layout {
  padding-left: 14rem; // 预留菜单宽度的空间
  min-height: 100vh;
}

.#{css-namespace}column{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    margin-bottom: 1rem;
}

可选补充：确保菜单层级在内容上方 #

如果出现菜单被内容覆盖的情况，给菜单组件添加z-index属性，保证它显示在内容上层：

:host {
  height: 100%;
  background-color: $color-blue-100;
  width: 14rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 100; // 新增此行，提升菜单层级
  // 其他原有样式...
}

内容的提问来源于stack exchange，提问作者l3miage-crivoid