在前端页面布局中，我们经常会遇到需要在可滚动的div容器内，让图片始终固定在容器的某个角落，不随内部内容滚动的场景。比如聊天窗口的消息区域，需要在右下角固定一个返回最新消息的图标；或者商品详情的滚动区域，在右上角固定一个收藏图标。很多开发者第一时间会想到使用position: fixed属性，但实际使用时会发现这个属性是相对于整个浏览器视口定位的，无法绑定到特定的div容器，无法达到预期效果。
核心实现思路
要实现滚动div内图片固定角落的效果，核心是使用position: sticky属性，同时配合容器的overflow属性配置。sticky定位的元素会在其滚动祖先容器内，当元素滚动到设定的阈值时，就会固定在容器的指定位置，不会随内容继续滚动。
基础实现步骤
- 首先给外层div容器设置固定的高度和
overflow-y: auto属性，让容器内部内容可以滚动 - 将需要固定的图片元素放在容器内部，设置
position: sticky属性，同时指定固定的方位，比如右下角就设置bottom: 10px; right: 10px - 给图片设置合适的z-index，避免被其他内容遮挡
完整代码示例
下面是一个完整的可运行示例，实现了在滚动div的右下角固定一张图片，图片不会随内容滚动：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动div内固定图片示例</title>
<style>
/* 外层滚动容器样式 */
.scroll-container {
width: 400px;
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
position: relative;
padding: 10px;
box-sizing: border-box;
}
/* 滚动内容样式 */
.scroll-content {
height: 800px;
background: linear-gradient(#f5f5f5, #e0e0e0);
padding: 10px;
}
/* 固定在右下角的图片样式 */
.fixed-img {
position: sticky;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #409eff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
z-index: 10;
float: right;
/* 兼容不同浏览器的写法 */
position: -webkit-sticky;
}
</style>
</head>
<body>
<h3>滚动div内固定图片示例</h3>
<div class="scroll-container">
<div class="scroll-content">
<p>这里是滚动内容区域，内部有大量内容，会超出容器高度产生滚动条。</p>
<p>尝试滚动内容，右下角的蓝色圆形图片会始终固定在容器的右下角，不会随内容滚动。</p>
<p>内容行1</p>
<p>内容行2</p>
<p>内容行3</p>
<p>内容行4</p>
<p>内容行5</p>
<p>内容行6</p>
<p>内容行7</p>
<p>内容行8</p>
<p>内容行9</p>
<p>内容行10</p>
</div>
<div class="fixed-img">固定图标</div>
</div>
</body>
</html>注意事项
使用position: sticky实现该效果时，需要注意以下几点：
- sticky元素的父容器不能设置
overflow: hidden、overflow: auto以外的overflow属性，否则sticky定位会失效 - sticky元素必须指定top、bottom、left、right四个方位中的至少一个，否则会等同于relative定位
- 如果需要在左上角固定图片，只需要将方位改为
top: 10px; left: 10px即可，其他方位同理调整 - 部分旧版本浏览器需要添加前缀，比如
position: -webkit-sticky适配 Safari 浏览器
其他实现方式对比
除了sticky定位，还可以通过其他方式实现类似效果，但各有优劣：
| 实现方式 | 优点 | 缺点 |
|---|---|---|
| position: sticky | 实现简单，代码量少，无性能问题 | 旧版本IE浏览器不支持 |
| position: absolute + JS监听滚动 | 兼容性更好，支持所有浏览器 | 需要编写JS逻辑，滚动频繁时可能有性能损耗 |
| position: fixed + 计算容器位置 | 兼容性较好 | 需要计算容器相对于视口的位置，逻辑复杂，窗口 resize 时需要重新计算 |
综合来看，在不需要兼容旧版本IE的场景下，优先使用position: sticky的方式实现，开发效率和运行性能都更优。
CSS滚动容器position_fixedoverflow布局技巧修改时间：2026-06-06 17:32:32