如何让HTML按钮元素始终相对于页面尺寸保持固定位置？

需求 #

• 按钮需相对于页面/视口固定位置，类似 position: absolute; left: 90%-page-size; 的效果
• 移动端下按钮不能溢出页面
• 优先纯CSS实现，可接受少量JavaScript

纯CSS解决方案（推荐） #

完全不需要JavaScript，通过调整定位属性就能搞定，两种常见场景：

场景1：按钮固定在导航栏右侧（随导航栏滚动） #

给导航栏容器添加相对定位，让汉堡按钮以它为基准定位，同时设置右侧边距避免溢出：

/* 修改.nav-bar的样式 */
.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
  position: relative; /* 新增：让子元素可以相对它定位 */
}

/* 在移动端媒体查询中添加汉堡按钮的定位样式 */
@media screen and (max-width: 830px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: inline-block;
  }
  .hamburger-menu {
    position: absolute;
    right: 15px; /* 和导航栏的padding一致，确保不溢出 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中对齐导航栏 */
    z-index: 99; /* 保证按钮在最上层不被遮挡 */
  }
}

场景2：按钮固定在视口右上角（不随页面滚动） #

如果需要按钮始终停留在屏幕右上角，用固定定位即可：

/* 在移动端媒体查询中添加 */
@media screen and (max-width: 830px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: inline-block;
  }
  .hamburger-menu {
    position: fixed;
    right: 15px; /* 右侧留边距，防止溢出 */
    top: 25px; /* 垂直位置可根据导航栏高度调整 */
    z-index: 99;
  }
}

方案说明 #

• 用right属性直接设置边距比calc(100% - 宽度)更灵活，自动适配所有屏幕尺寸，不会出现溢出问题。
• transform: translateY(-50%)能让按钮在导航栏中完美垂直居中，不用手动计算垂直偏移量。
• 纯CSS实现性能更好，维护成本更低，完全满足需求。

可选JavaScript方案（仅特殊场景用） #

如果你的布局有动态变化的需求，比如按钮宽度不固定，可以用少量JS动态计算位置：

// 监听窗口大小变化，动态调整按钮位置
window.addEventListener('resize', () => {
  const hamburger = document.querySelector('.hamburger-menu');
  const padding = 10; // 右侧边距
  hamburger.style.left = `${window.innerWidth - hamburger.offsetWidth - padding}px`;
});

// 页面加载时初始化一次
window.dispatchEvent(new Event('resize'));

不过一般情况下，纯CSS方案已经足够解决问题，优先用CSS。

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