如何让不同屏幕尺寸下的按钮保持固定位置不变？

问题根源 #

你当前的代码出现适配问题主要有三个原因：

• 按钮使用百分比值设置margin-top，百分比是基于父元素宽度计算，屏幕宽度变化时数值会同步变动，无法和背景上的固定标题位置匹配
• 按钮父容器用left:80%做绝对定位，不同屏幕宽度下右侧留白差异大，水平位置会出现偏移
• 用<br/>换行加单独给每个按钮设置margin的方式控制间距，适配性极差，字体大小、行高变化都会导致错位

优化方案 #

直接替换原有CSS和HTML代码即可，修改后逻辑用弹性布局控制按钮排列，定位参照和单位都做了适配优化：

CSS代码 #

/* 给按钮外层父容器加相对定位，作为绝对定位的参照基准 */
.hero-fixed-width__content {
  position: relative;
  width: 100%;
  /* 替换为你背景图实际的宽高比，确保容器和背景图缩放比例完全一致 */
  aspect-ratio: 16/9;
}

.page-width.text-center {
  top: 8vh; /* 视窗高度单位，位置可根据实际显示效果调整 */
  left: 80%;
  position: absolute;
  transform: translateX(-50%); /* 修正水平定位偏差，确保按钮组始终在目标位置水平居中 */
  display: flex;
  flex-direction: column;
  gap: 88px; /* 三个按钮的纵向间距，可根据背景标题的间距调整，仅改这一个值即可统一控制 */
  align-items: center;
}

.hero-fixed-width__content .btn{
  /* 响应式字体，三个参数分别是最小字号、自适应字号、最大字号，可按需调整 */
  font-size: clamp(16px, 2vw, 20px);
  border: black 2px solid !important;
  color: black !important;
  font-weight: bold;
  background: transparent !important;
}

HTML代码 #

<div class="hero-fixed-width__content">
    <div class="page-width text-center">
        <a href="" class="btn hero__btn btn1">SHOP NOW </a>
        <a href="" class="btn hero__btn btn2">SHOP NOW </a>
        <a href="" class="btn hero__btn btn3">SHOP NOW </a>        
    </div>
</div>

补充说明 #

• 如果极小屏设备下还是有轻微错位，加媒体查询微调.page-width.text-center的top和left数值即可
• 所有可调参数都做了注释标注，可根据你的实际视觉需求灵活修改

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