在HTML5页面开发过程中，控制图像的位置是前端布局的基础需求，其中固定定位能让图像脱离常规文档流，始终固定在浏览器视口的指定位置，不会随页面滚动而发生位置偏移，适合实现悬浮导航图标、侧边固定广告图等场景。
固定定位的基础设置方法
固定定位的核心是通过CSS的position属性设置，当元素设置position: fixed后，就会成为固定定位元素，其定位参考系是浏览器的可视窗口，而非父元素或者文档流。
要设置图像的固定定位，首先需要给目标图像添加对应的CSS样式，基础代码结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位图像示例</title>
<style>
/* 固定定位图像样式 */
.fixed-img {
position: fixed; /* 设置固定定位 */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="https://ipipp.com/demo-img.png" class="fixed-img" alt="固定定位示例图">
<div style="height: 2000px;">
这里是大量占位内容，用于测试页面滚动效果
</div>
</body>
</html>
确定固定定位图像的位置
固定定位元素的位置需要通过top、bottom、left、right四个偏移属性来确定，这四个属性分别控制元素距离浏览器可视窗口上、下、左、右边缘的距离，取值可以是像素、百分比等单位。
常用位置设置示例
- 固定在右上角：设置
top: 20px; right: 20px，图像会距离窗口顶部20像素，右侧20像素 - 固定在左下角：设置
bottom: 30px; left: 30px，图像会距离窗口底部30像素，左侧30像素 - 固定在垂直居中右侧：设置
top: 50%; right: 20px; transform: translateY(-50%)，先让图像顶部距离窗口顶部50%高度，再通过位移让图像自身垂直居中
完整的定位代码示例：
/* 固定在右上角的图像 */
.fixed-img-right-top {
position: fixed;
width: 80px;
height: 80px;
top: 20px; /* 距离窗口顶部20px */
right: 20px; /* 距离窗口右侧20px */
z-index: 999; /* 设置层级，避免被其他元素遮挡 */
}
固定定位图像滚屏不挪动的实现要点
要让固定定位的图像完全不随滚屏挪动，只需要保证position属性设置为fixed，同时不要给固定定位元素设置会影响其定位的父级属性即可，因为固定定位的参考系始终是浏览器可视窗口，和页面滚动无关。
常见误区规避
- 不要给固定定位元素的父元素设置
transform、perspective、filter属性，这些属性会让固定定位的参考系变成该父元素，导致图像随父元素滚动 - 不要误将
position: absolute当成固定定位，绝对定位的参考系是最近的已定位父元素，页面滚动时还是会跟随父元素移动 - 如果需要兼容非常旧的浏览器，需要确认浏览器是否支持
position: fixed属性，不过目前主流浏览器都已经完全支持该属性
固定定位的层级控制
当页面中有多个固定定位元素，或者固定定位元素被其他元素遮挡时，需要通过z-index属性控制层级，z-index取值越大，元素显示越靠前。
示例代码：
/* 悬浮按钮固定定位，层级设为最高避免被遮挡 */
.float-btn {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
z-index: 1000; /* 层级高于普通元素和大部分固定定位元素 */
border-radius: 50%;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 60px;
cursor: pointer;
}
固定定位使用注意事项
虽然固定定位使用简单，但在实际开发中还需要注意以下问题：
- 固定定位元素会脱离文档流，不会占据原来的文档空间，可能会导致后续元素布局异常，需要提前预留对应空间
- 在移动端部分浏览器中，固定定位可能会在虚拟键盘弹出时出现位置异常，需要针对性做适配处理
- 不要过度使用固定定位，过多的固定定位元素会占用可视窗口空间，影响用户正常浏览页面内容
通过上述内容，就可以完全掌握HTML5中图像固定定位的设置方法，快速实现滚屏不挪动的固定图像效果，满足各类页面布局需求。
HTML5固定定位图像位置CSS_position修改时间：2026-07-15 00:24:35