Blogger Simple模板下页面角落元素固定失效问题求助

核心诱因 #

Chrome 108及以上版本调整了视口单位计算规则、fixed定位元素的包含块判定逻辑，原有未适配新规则的CSS会出现定位偏移。

修复步骤 #

• 调整导航按钮定位样式
  找到主题CSS中导航按钮对应的样式规则，替换为以下代码，将示例类名替换为你实际使用的按钮类名即可：

  .mobile-menu-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 99999;
    /* 新增逻辑兼容Chrome新定位规则 */
    inset-inline-end: 15px;
    inset-block-start: 15px;
  }
  

• 调整右侧边栏样式
  找到侧边栏对应的CSS规则，替换为以下代码，将示例类名替换为你实际使用的侧边栏类名即可：

  .sidebar-right {
    position: fixed;
    top: 0;
    right: 0;
    inset-inline-end: 0;
    height: 100dvh;
    z-index: 99998;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  /* 侧边栏展开状态规则，保持与你原有触发类名一致即可 */
  .sidebar-right.active {
    transform: translateX(0);
  }
  

• 补全视口元标签
  检查站点head部分是否存在以下标签，缺失则添加：

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

生效验证 #

修改完成后清除浏览器缓存，打开Chrome移动端调试模式，多次刷新测试按钮固定效果、侧边栏展开贴合效果即可。

内容的提问来源于stack exchange，提问作者L. core