信息发布→ 登录 注册 退出

CSS定位：实现图片在滚动Div中固定于角落不随内容滚动

发布时间：2025-10-14

点击量：

CSS定位：实现图片在滚动Div中固定于角落不随内容滚动

本文详细讲解如何利用css的`position: relative`和`position: absolute`属性，实现在一个可滚动`div`容器中，将图片精确固定在其角落，且不随内容滚动。通过设置父容器为相对定位，子图片为绝对定位，确保图片始终相对于父容器边界保持固定，同时兼顾移动设备兼容性，是前端开发中处理此类ui布局的实用技巧。

在网页设计中，我们经常会遇到需要在特定容器（如一个可滚动区域）的角落放置装饰性图片或图标的需求。然而，当容器内容发生滚动时，这些角落的图片往往会随之滚动，无法保持其相对于容器边缘的固定位置。本文将深入探讨如何利用CSS的定位属性，优雅地解决这一问题，确保图片始终固定在容器的指定角落，而不受内容滚动的影响。

理解CSS定位机制

要解决此问题，首先需要理解CSS中几个关键的定位属性：position: static、position: relative、position: absolute 和 position: fixed。

  • position: static (默认值)：元素遵循正常的文档流。top, right, bottom, left, z-index 属性无效。
  • position: relative (相对定位)：元素仍然在正常的文档流中，但可以通过 top, right, bottom, left 属性相对于其自身在文档流中的原始位置进行偏移。更重要的是，一个相对定位的元素会为其绝对定位的子元素创建一个新的定位上下文。
  • position: absolute (绝对定位)：元素会脱离正常的文档流，不再占据空间。它会相对于其最近的已定位祖先元素（即 position 属性不是 static 的祖先元素）进行定位。如果没有已定位的祖先元素，它将相对于初始包含块（通常是 html> 元素）进行定位。
  • position: fixed (固定定位)：元素会脱离正常的文档流，相对于视口（viewport）进行定位。这意味着它会固定在屏幕上的某个位置，即使页面滚动也不会移动。

在我们的场景中，我们希望图片固定在父div的角落，而不是页面的角落，并且不随父div内容的滚动而移动。position: fixed 会使图片固定在视口边缘，这不符合我们的要求。因此，我们需要利用 position: relative 和 position: absolute 的组合。

解决方案：相对定位父容器与绝对定位子元素

核心思路是：将父容器设置为 position: relative，从而为内部的绝对定位子元素提供一个定位上下文。然后，将需要固定在角落的图片设置为 position: absolute，并使用 top, right, bottom, left 属性将其精确地定位到父容器的相应角落。

立即学习“前端免费学习笔记（深入）”；

示例代码

假设我们有一个可滚动的日志更新区域，并希望在它的四个角落放置装饰性图片。

HTML 结构:

<div class="scrollable-container">
    <!-- 左上角图片 -->
    @@##@@
    <!-- 右上角图片 -->
    @@##@@
    <!-- 左下角图片 -->
    @@##@@
    <!-- 右下角图片 -->
    @@##@@

    <!-- 容器内容，此处为更新日志 -->
    <p>
        <b style="padding: 5px;">22/05/22</b>
        <a href="https://toyhou.se/~world/74697.20studios">Updated: Alpha 0.1.3 Added all bases to base character gallery.</a>
    </p>
    <p>更多更新日志内容...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1728">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d28da274e764.png" alt="Visla">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1728">Visla</a>
                            <p>AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Visla">
                                <span>100</span>
                            </div>
                        </div>
                        <a href="/ai/1728" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Visla">
                        </a>
                    </div>
                
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p&gt;更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志内容...</p>
    <p>更多更新日志
Top left cornerTop right cornerBottom left cornerBottom right corner

以上就是CSS定位：实现图片在滚动Div中固定于角落不随内容滚动的详细内容，更多请关注其它相关文章！


相关文章： 快手极速版在线观看 官方网页版登录地址  php源码怎么看淘宝客系统_看php源码淘宝客系统技巧  向日葵客户端怎么进行远程CentOS控制_向日葵客户端远程CentOS控制操作教程  漫蛙2漫画入口 漫蛙正版网页漫画直达网址  Android Studio计算器C键功能异常排查与修复教程  深入理解J*a编译器的兼容性选项：从-source到--release  在Typer应用中优雅地处理和重组任意命令行参数  基于动态规划的房屋花卉种植最小成本算法详解  CSS响应式网页如何实现主次模块比例自适应_flex-grow与flex-shrink调整  J*a 递归快速排序中静态变量的状态管理与陷阱  Lar*el开发：如何在编辑界面正确预选数据库中的多选标签  抖音网页版企业服务中心登录入口_抖音网页版企业登录平台  如何优雅地解决Livewire文件上传难题？SpatieLivewireFilepond让一切变得简单  LINUX下如何进行磁盘分区_fdisk与parted工具在LINUX中的使用对比  支付宝解绑银行卡步骤_支付宝如何解除绑定银行卡  Win11怎么关闭快速启动_Win11彻底关机设置教程  将JSON对象数组转置为键值对列表的实用指南  Windows7怎么硬盘安装 Windows7提取ISO镜像到非系统盘并运行setup.exe实现硬盘直装【教程】  小红书怎么解除第三方平台绑定_小红书多平台登录解绑方法介绍  UC浏览器官网入口2025最新 UC浏览器网页版正式地址  Python自定义类排序：解决lambda键值访问TypeError的实践指南  Python中如何避免重复条件判断：利用数据结构实现动态逻辑  使用 Pandas 高效处理 .dat 文件：数据清洗与数值计算实战  J*a如何使用AtomicInteger控制计数_J*a无锁计数器性能分析  Golang如何使用net/url解析URL_Golang URL解析与处理方法  J*aScript实现单选按钮与关联输入框的联动禁用教程  BetterDiscord插件中安全更新用户简介的实践指南  windows10怎么查看本机ip_windows10命令提示符ipconfig使用  谷歌浏览器如何快速清除某个网站的数据_Chrome网站缓存清理方法  邮政快递包裹最新位置 邮政快递实时追踪入口  如何提高微信支付的安全性_微信支付安全防护与设置建议  Golang如何使用buffered channel提高性能_Golang buffered channel优化技巧  多闪网页版在线观看免费入口_多闪官网访问入口  Excel Power Pivot如何处理XML数据源 构建高级数据模型  如何使用CaptainHook和Composer管理Git钩子_在提交前自动运行代码检查的Composer配置  哔哩哔哩忘记密码了怎么找回_哔哩哔哩密码找回方法  Lar*el 递归关系中排除指定分支的教程  c++如何使用折叠表达式(Fold Expressions)_c++17可变参数模板新技巧  J*aScript Promise链中如何正确终止后续.then执行并处理错误  Python Sounddevice 音频卡顿问题解析与队列数据安全处理  怎么在html里运行vbs脚本_html中运行vbs脚本方法【教程】  J*a递归快速排序中静态变量导致数据累积问题的解决方案  Python实时数据流中的动态最值查找策略  NRF24L01数据传输深度解析：解决大载荷接收异常与分包策略  J*a应用集成GitHub CLI与API认证指南  如何在 Windows 11 中启动游戏手柄设置  Yandex浏览器官方网页版入口 Yandex浏览器最新版官网  Windows10怎么开启存储感知 Windows10系统设置自动清理临时文件释放C盘空间【教程】  苹果手机如何防止被恶意App追踪  J*aScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程 

标签：# css  # 如何使用  # 视频文件  # 中固  # 的是  # 黄石网站建设的总体目标  # 海南seo快排怎么赚钱  # 智能seo项目招商方案  # 正品蓝seo  # 网站建设落后的原因  # seo的业务员  # 薯条营销推广方式分析  # seo需要优化哪些代码  # 网站推广预算  # 于其  # 它会  # html  # 前端  # qq  # 前端开发  # ai  # ios  # 网页设计  # 绝对定位  # 相对定位  # 固定定位  # 相对于  # 文档  # 设置为  # 西藏电焊面罩网站建设  

上一篇：html编辑器如何创建自定义插件 html编辑器扩展开发的入

下一篇：在css中如何制作圆形头像效果

返回
在线客服
服务热线

服务热线

4008988990

微信咨询
二维码
返回顶部
×二维码

截屏，微信识别二维码

打开微信

微信号已复制，请打开微信添加咨询详情！