在可滚动的Div容器中让图片固定在角落不随内容滚动，核心是利用CSS定位属性的层级关系，结合容器的溢出滚动设置来实现。这种需求常见于各类前端交互场景，比如商品卡片的固定角标、滚动列表的操作按钮等。
核心实现原理
要实现这个效果，需要明确两个定位上下文：外层滚动容器和内层固定图片。外层容器需要设置position: relative作为定位参考，同时设置overflow: auto或overflow: scroll开启滚动；图片需要设置position: absolute，相对于外层容器定位，这样就不会跟随容器内部的可滚动内容移动。
具体实现步骤
- 第一步：创建外层滚动Div容器，设置基础样式，包括宽高、溢出滚动属性和相对定位
- 第二步：在容器内添加需要滚动的内容，比如多段文本或者列表项，确保内容高度超过容器高度，出现滚动条
- 第三步：在容器内添加目标图片，设置绝对定位，通过top、right、bottom、left属性调整角落位置
完整代码示例
下面是一个可直接运行的完整示例，实现了图片在滚动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: 300px;
height: 200px;
border: 1px solid #ccc;
overflow: auto;
position: relative; /* 作为内部绝对定位元素的参考 */
padding: 10px;
}
/* 滚动内容样式 */
.scroll-content {
height: 400px; /* 内容高度超过容器，出现滚动条 */
background: linear-gradient(#f5f5f5, #e8e8e8);
padding: 10px;
}
/* 固定角落的图片样式 */
.fixed-img {
position: absolute;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #409eff;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="scroll-content">
<p>这是滚动内容的第一行</p>
<p>这是滚动内容的第二行</p>
<p>这是滚动内容的第三行</p>
<p>这是滚动内容的第四行</p>
<p>这是滚动内容的第五行</p>
<p>这是滚动内容的第六行</p>
<p>这是滚动内容的第七行</p>
<p>这是滚动内容的第八行</p>
</div>
<div class="fixed-img">角标</div>
</div>
</body>
</html>注意事项
- 外层容器必须设置
position: relative，否则绝对定位的图片会相对于整个页面定位，而不是容器 - 如果容器本身已经有
position: absolute或position: fixed，也可以作为定位参考，不需要额外修改 - 调整图片位置时，top、right等属性的值要考虑到容器的padding，避免图片被边框遮挡
- 如果需要兼容旧版本浏览器，要确认
position和overflow属性的兼容性，必要时添加前缀
CSS定位position属性overflow属性滚动容器固定角落修改时间：2026-06-06 17:41:08