在响应式网页开发中，使用固定像素设置定位元素的top、left、right、bottom等属性，很容易在不同屏幕尺寸下出现元素位置偏移、超出容器范围的问题，改用百分比单位替代固定像素可以有效解决这类适配难题。
为什么固定像素会导致定位适配困难
固定像素是绝对长度单位，不会随屏幕尺寸变化而改变数值。当页面中存在绝对定位或固定定位的元素时，如果使用固定像素设置偏移量，那么在屏幕宽度小于设计稿宽度时，元素可能会超出可视区域；屏幕宽度大于设计稿宽度时，元素又会偏离原本的布局位置。
比如下面这段使用固定像素定位的代码，在375px宽度的手机屏幕上，元素会紧贴左侧，但在1920px宽度的桌面屏幕上，元素会距离左侧200px，位置差异非常明显：
/* 使用固定像素的定位样式 */
.box {
position: absolute;
left: 200px;
top: 100px;
width: 300px;
height: 200px;
background: #f0f0f0;
}
百分比单位在定位中的计算规则
百分比单位的计算基准是元素的包含块，对于定位元素来说，包含块通常是最近的已定位祖先元素，如果没有已定位祖先，就是初始包含块（通常是html元素）。
- left和right的百分比：基于包含块的宽度计算
- top和bottom的百分比：基于包含块的高度计算
- width和height的百分比：同样基于包含块的对应维度尺寸计算
使用百分比替代固定像素的实现方式
我们将上面的固定像素定位示例改为百分比定位，只需要调整left、top、width的数值即可：
/* 使用百分比的定位样式 */
.container {
position: relative;
width: 100%;
height: 500px;
background: #e8e8e8;
}
.box {
position: absolute;
left: 20%; /* 基于container宽度的20% */
top: 20%; /* 基于container高度的20% */
width: 30%; /* 基于container宽度的30% */
height: 40%; /* 基于container高度的40% */
background: #f0f0f0;
}
对应的html结构如下：
<div class="container"> <div class="box">定位元素</div> </div>
这样修改后，不管屏幕宽度是375px还是1920px，box元素始终会距离container左侧20%的宽度，宽度占container的30%，会自动适配不同屏幕的尺寸。
使用百分比定位的注意事项
1. 确保包含块有明确的尺寸
如果包含块没有设置明确的宽度或高度，百分比计算可能会不符合预期。比如包含块的高度没有显式设置，那么top和bottom的百分比可能会基于内容高度计算，导致适配效果不稳定。
2. 结合其他响应式单位使用
百分比单位可以和em、rem、vw、vh等单位结合使用，应对更复杂的适配场景。比如需要元素在不同屏幕下保持固定的比例关系时，可以搭配calc()函数计算：
.box {
position: absolute;
left: calc(10% + 1rem);
top: 15%;
width: 25%;
height: 30%;
}
3. 固定定位的特殊处理
固定定位的包含块是视口，所以百分比会基于视口的宽度和高度计算，不需要额外设置祖先元素的定位属性，适合做全屏适配的固定元素，比如悬浮按钮、顶部导航栏等。
常见问题解答
问：百分比定位和vw/vh单位有什么区别？
答：百分比基于包含块尺寸计算，vw/vh基于视口尺寸计算，固定定位场景下两者效果接近，但相对定位或绝对定位有已定位祖先时，百分比会更符合布局预期。
问：所有定位场景都适合用百分比吗？
答：不是，如果需要元素在不同屏幕下保持固定的像素大小，比如小图标，还是适合用固定像素或rem单位，百分比更适合需要随容器尺寸变化调整位置和大小的场景。