如何修复固定顶部导航栏右侧元素因滚动条被遮挡的问题

这个问题其实挺常见的，核心原因是：当页面出现垂直滚动条时，浏览器会从视口的可用宽度中扣除滚动条的宽度，但你设置的width: 100%会让fixed定位的header强制占据整个视口宽度（包括滚动条所在的区域），导致右侧元素被滚动条覆盖。

解决方案：用left: 0; right: 0替代width: 100% #

修改你的CSS代码，把width: 100%替换成左右定位，让header自动适配视口的可用宽度（避开滚动条区域）：

header {
  height: 150px;
  z-index: 1000;
  position: fixed;
  background-color: white;
  left: 0;
  right: 0; /* 关键：让元素左右紧贴视口边缘，自动适配滚动条出现后的宽度 */
  top: 0; /* 明确顶部定位，避免潜在的布局偏差 */
}

为什么这个方法有效？ #

当你给fixed元素同时设置left: 0和right: 0时，浏览器会自动计算元素的宽度为视口的可用宽度（也就是扣除滚动条后的宽度），而不是强制占满100%视口宽度。这样右侧的"Right Item"就会被正确定位在滚动条左侧，不会被遮挡。

额外优化：避免页面内容被header遮挡 #

因为header是fixed定位，会悬浮在页面内容上方，建议给body添加顶部内边距，让内容从header下方开始显示：

body {
  padding-top: 150px; /* 值等于header的高度 */
  margin: 0; /* 重置浏览器默认的body margin，避免额外的横向滚动 */
}

你的HTML部分的Flex布局（fxLayout="row"和空span的flex:1 1 auto）是没问题的，它能正确让右侧元素对齐到头部的右端。

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