移动端浏览器中sticky/fixed元素部分偏移屏幕问题求助

桌面端浏览器中，设置了sticky定位的mat-toolbar显示正常，但在移动端浏览器中，该组件会向上滚动偏移约20px。已确认上级元素的margin和padding均为0。

HTML #

<mat-toolbar color="primary">

  <app-my-svg style="min-width: 50px; max-width: 70%; padding-top: 10px;" #svgAnima class="svg-image"
    id="svgAnima" [mat-menu-trigger-for]="menu">
  </app-my-svg>
  <div class="hamburger">
    <mat-menu #menu="matMenu">
      <nav class="menu">
        <a mat-menu-item (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems">{{ item.label }}
        </a>
      </nav>
    </mat-menu>
  </div>

  <div class="navBar">
    <button mat-flat-button color="primary" (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems"
      class="menuBar">
      {{item.label }}
    </button>
  </div>

  <span>Zastroycogramm </span>

</mat-toolbar>

CSS #

mat-toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 50;
    max-height: 200px;
    width: 100%;
}

.menu {
    flex: 1;
    font-family: Roboto, 'Helvetica Neue', sans-serif; 
}

@media (min-width: 1000px) {
    .navBar {
        display: flex;
        width: 100%;
        align-items: center;
        font-family: Roboto, 'Helvetica Neue', sans-serif;

    }

    .hamburger {
        display: none;
    }
}

@media (max-width: 999px) {
    .navBar {
        display: none;
    }

    .hamburger {
        display: flex;
        width: 100%;
    }
}

问题截图 #

• 偏移状态：Toolbar向上偏移约20px，顶部出现空白区域
• 正常状态：Toolbar贴合页面顶部显示

• 修正视口设置
  移动端浏览器地址栏的动态隐藏会改变视口高度，影响sticky定位。在index.html的<head>中添加标准视口标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

  viewport-fit=cover确保页面内容覆盖整个视口，避免浏览器UI变化导致的偏移。

• 调整sticky定位属性
  尝试微调top值，同时确保样式优先级和兼容性：

  mat-toolbar {
      position: -webkit-sticky;
      position: sticky;
      top: 0; /* 或尝试top: 1px，部分浏览器对0值的解析有差异 */
      left: 0;
      z-index: 50;
      max-height: 200px;
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  

• 检查父元素overflow属性
  父元素的overflow: hidden或overflow: auto会破坏sticky定位。检查所有上级容器，确保它们的overflow属性为visible：

  .toolbar-parent {
      overflow: visible;
  }
  

• 移动端针对性修正
  通过媒体查询添加额外样式抵消偏移：

  @media (max-width: 999px) {
      mat-toolbar {
          transform: translateY(0);
          /* 若仍有偏移，可临时设置top: 20px抵消，但优先排查根源问题 */
      }
  }
  

• 重置Angular Material默认样式
  检查浏览器开发者工具中mat-toolbar的计算样式，若存在Material自带的移动端偏移样式，针对性重置：

  mat-toolbar {
      margin-top: 0 !important;
      position: sticky !important;
  }
  

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