CSS- 4.2 相对定位（position: relative）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.1 浮动（Float）
CSS- 4.2 相对定位（position: relative）
目录
系列文章目录
前言
一、理论部分
1.基本概念
2.语法
3.特点详解
4.实际应用场景
（1） 微调元素位置
（2）作为绝对定位的参考点
（3）创建视觉效果而不破坏布局
5.与其他定位方式的比较
6.注意事项
7.最佳实践
二、代码实例
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、理论部分
相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。
1.基本概念
相对定位的元素会：
- 保留原始空间：元素在文档流中仍然占据原来的位置
- 相对于自身偏移：通过
top、right、bottom、left属性相对于其正常位置进行偏移 - 不影响其他元素：其他元素会像该元素仍在原位置一样进行布局
2.语法
css
.element {position: relative;top: 10px; /* 向下偏移10像素 */left: 20px; /* 向右偏移20像素 *//* 或使用其他方向 *//* right: 10px; *//* bottom: 10px; */
}3.特点详解
-
空间保留
相对定位的元素在文档流中仍然占据其原始位置，只是视觉上看起来移动了。其他元素不会填补它"离开"的空间。 -
偏移基准
偏移是相对于元素在正常文档流中的位置计算的，而不是相对于父元素或其他元素。 -
层级提升
相对定位的元素会创建一个新的层叠上下文（stacking context），但不会脱离文档流。
4.实际应用场景
（1） 微调元素位置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {width: 100px;height: 100px;background: lightblue;margin: 10px;}.relative-box {position: relative;top: 20px;left: 30px;background: lightcoral;}</style></head><body><div class="box">原始位置</div><div class="box relative-box">相对定位</div></body>
</html>
效果：第二个div会向下偏移20px，向右偏移30px，但第一个div不会移动填补这个空间。
（2）作为绝对定位的参考点
相对定位常被用作绝对定位子元素的参考容器：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.parent {position: relative;width: 300px;height: 200px;background: #eee;}.child {position: absolute;top: 10px;right: 10px;background: #ff0;}</style></head><body><div class="parent"><div class="child">绝对定位的子元素</div></div></body>
</html>
在这个例子中，子元素的绝对定位是相对于其相对定位的父元素计算的。
（3）创建视觉效果而不破坏布局
相对定位可以用于创建悬停效果、工具提示等，而不影响页面其他部分的布局。
5.与其他定位方式的比较
| 定位方式 | 是否脱离文档流 | 偏移基准 | 是否影响其他元素 |
|---|---|---|---|
| 静态定位(static) | 否 | 无 | 否 |
| 相对定位(relative) | 否 | 元素自身原始位置 | 否 |
| 绝对定位(absolute) | 是 | 最近的已定位祖先元素 | 是 |
| 固定定位(fixed) | 是 | 视口 | 是 |
| 粘性定位(sticky) | 混合 | 视口或最近的滚动祖先 | 否（通常） |
6.注意事项
- 性能考虑：相对定位的元素仍然参与文档流计算，大量使用可能影响渲染性能
- 层叠顺序：相对定位的元素会覆盖静态定位的元素（除非设置z-index）
- 响应式设计：在响应式布局中，相对定位可能需要配合媒体查询调整偏移值
- 可访问性：过度使用定位可能影响屏幕阅读器的用户体验
7.最佳实践
- 用于微调元素位置而非主要布局
- 作为绝对定位元素的定位上下文容器
- 避免在需要精确控制的响应式布局中过度使用
- 结合transform属性（如
translate()）可能比使用top/left更高效
相对定位是CSS定位系统中一个灵活而强大的工具，特别适合需要微调元素位置而不破坏整体布局的场景。
二、代码实例
代码实例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位-相对定位relative</title><style type="text/css">.div1 {width: 100px;height: 100px;background-color: red;}.div2 {width: 100px;height: 100px;background-color: blue;position: relative;/* 以原来的位置为基准发生偏移 */left: 100px;top: -50px;}.div3 {width: 100px;height: 100px;background-color: green;}#btn {position: relative;top: 2px;}</style></head><body><div class="father"><div class="div1"></div><div class="div2"></div><div class="div3"></div><input type="" name="" id="btn" value="" /></div><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>代码运行：
总结
以上就是今天要讲的内容，本文简单记录了CSS之相对定位，仅作为一份简单的笔记使用，大家根据注释理解
相关文章：
CSS- 4.2 相对定位（position: relative）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 点…...
Face Over 84.0| 利用AI技术交换照片或视频中的面孔，制作有趣内容
Face Over是一款充满创造力和乐趣的应用程序，它利用AI技术帮助用户交换照片或视频中的面孔，预测未来宝宝的模样，并将照片制作成动画。无论您是想制作有趣的模因、口型同步视频还是探索未来家庭成员的模样，这款应用程序都能满足您的…...
怎么在excel单元格1-5行中在原来内容前面加上固定一个字？
环境： WPS 2024 问题描述： 怎么在excel单元格1-5行中在原来内容前面加上固定一个字？ 解决方案： 1.在Excel中，如果您想在单元格的内容前面添加一个固定的字，可以通过以下几种方法实现： 方法…...
AI：人形机器人一定是人的形状吗？
本文将从技术角度分析人形机器人是否必须是人的形状，以及人形与非人形机器人在适用场合、优缺点上的差异。以下是详细解答： 人形机器人一定是人的形状吗？ 不，人形机器人（Humanoid Robot）在技术上通常指外…...
26、思维链Chain-of-Thought（CoT）论文笔记
思维链Chain-of-Thought（CoT） **1、研究背景与核心目标****2、思维链提示的方法设计**2.1 COT方法2.2 传统方法 3、实验设计与关键数据集3.1 算术推理3.2 常识推理3.3 符号推理 4、关键实验结果1. 算术推理：思维链提示显著提升多步问题解决率…...
golang中的反射示例
文章目录 前言一、通过反射获取底层类型 reflect.typeOf()二、反射获取底层的值 reflect.ValueOf()三、通过反射设置底层值四 、进阶结构体反射示例 前言 反射就像是给程序装上了显微镜，运行时随时查看底层类型以及底层值，根据需要动态读写或调用方法。…...
NX二次开发——设置对象的密度（UF_MODL_set_body_density）
在前几篇博客中我们已经探讨了如何设置实体的密度。在装配环境中，同样可以为组件设置密度。虽然不能直接对组件进行密度设置，但可以通过一种间接方式实现：在装配环境下，利用 UF_ASSEM_set_work_part_quietly() 函数以静默方式将组…...
基于朴素贝叶斯与 LSTM 的假新闻检测模型对比分析
一、引言 在信息爆炸的时代，假新闻的传播对社会产生了诸多负面影响。如何快速、准确地识别假新闻成为了重要的研究课题。本文将对比传统机器学习算法（朴素贝叶斯）与深度学习模型（LSTM）在假新闻检测任务中的性能表现&am…...
共享内存【Linux操作系统】
文章目录 共享内存共享内存的原理共享内存相关函数和系统调用--systemV系统调用：shmget系统调用：shmctl系统调用：shmat系统调用：shmdt系统调用：ftok 共享内存相关函数和系统调用--POSIXshm_open-- 创建或打开共享内存对…...
Android核心系统服务：AMS、WMS、PMS 与 system_server 进程解析
1. 引言 在 Android 系统中，ActivityManagerService (AMS)、WindowManagerService (WMS) 和 PackageManagerService (PMS) 是三个最核心的系统服务，它们分别管理着应用的生命周期、窗口显示和应用包管理。 但你是否知道，这些服务并不是独立…...
arduino平台读取鼠标光电传感器
鼠标坏掉了，大抵是修不好了。（全剧终—） 但是爱动手的小明不会浪费这个鼠标，确认外观没有明显烧毁痕迹后，尝试从电路板上利用光电传感器进行位移的测量，光电传感器（型号：FCT3065&am…...
EXO分布式部署deepseek r1
EXO 是一个支持分布式 AI 计算的框架，可以用于在多个设备（包括 Mac Studio）上运行大语言模型（LLM）。以下是联调 Mac Studio 512GB 的步骤： 安装 EXO • 从 EXO GitHub 仓库 下载源码或使用 git clone 获取…...
机器学习 KNN算法
KNN算法 1. sklearn机器学习概述2. KNN算法-分类1 样本距离判断2 KNN 算法原理3 KNN缺点4 API5 sklearn 实现KNN示例6 模型保存与加载葡萄酒(load_wine)数据集KNN算法(1)wine.feature_names:(2)wine.target_names(3)KNN算法实现 1. sklearn机器学习概述 获取数据、数据处理、特…...
强化学习赋能医疗大模型：构建闭环检索-反馈-优化系统提升推理能力
引言 人工智能技术在医疗领域的应用正经历前所未有的发展，特别是在大型语言模型(LLMs)技术的推动下，医疗大模型(Medical Large Models)展现出巨大的潜力。这些模型不仅能够理解复杂的医学术语和概念，还能通过自然语言与用户交互，为医疗专业人士和患者提供有价值的信息和建…...
深入解析Spring Boot与JUnit 5的集成测试实践
深入解析Spring Boot与JUnit 5的集成测试实践 引言 在现代软件开发中，测试是确保代码质量和功能正确性的关键环节。Spring Boot作为目前最流行的Java Web框架之一，提供了强大的支持来简化测试流程。而JUnit 5作为最新的JUnit版本，引入了许多…...
哈希的原理、实现
目录 引言 一、哈希概念 二、哈希函数 三、哈希冲突解决方法 四、unordered系列关联式容器（以unordered_map为例） 五、哈希的应用 完整代码 六、总结 引言 在计算机科学领域，哈希是一种非常重要的数据结构和算法思想，广…...
端口443在git bash向github推送时的步骤
端口443在git bash向github推送时的步骤 你的环境可能因防火墙限制无法使用默认的 SSH 端口（22），因此需要改用 SSH over HTTPS（端口 443） 进行 Git 推送。 github与git bash绑定问题详见博主先前写过的参考博文&#…...
Ankr：Web3基础设施的革新者
在Web3技术蓬勃发展的今天，去中心化基础设施的重要性日益凸显。Ankr作为这一领域的佼佼者，凭借其强大的分布式云计算能力和创新的技术解决方案，正在成为推动Web3发展的关键力量。本文将深入探讨Ankr的技术亮点、应用场景以及其在区块链生态中…...
配置git从公网能访问-基于frp
git从公网能访问 一个小小的疏忽带来了一下午上午的工作量起因与上下文与结论主要收获1。公网主机的防火墙需要至少三条3。gitlab的http端口和ssh端口，需要分为两个3。不要用nginx来解析二级域名 测试指令最终的成功的指令是： 用到的指令ssh1. 生成 SSH …...
HarmonyOS：重构万物互联时代的操作系统范式
HarmonyOS：重构万物互联时代的操作系统范式 引言：操作系统的新纪元 在数字化转型的深水区，操作系统作为数字世界的基石正在经历前所未有的变革。当全球科技巨头还在移动终端操作系统领域激烈角逐时，华为推出的HarmonyOS以分布式…...
告别“知识孤岛”：RAG赋能网络安全运营
一、背景 在网络安全运营工作中，我们积累了大量的内部知识内容，涵盖了威胁情报、事件响应流程、安全策略、合规性要求等多个方面。然而，这些知识虽然数量庞大、内容丰富，却因形式多样、结构分散，难以让每一位成员真正…...
A级、B级弱电机房数据中心建设运营汇报方案
该方案围绕A 级、B 级弱电机房数据中心建设与运营展开，依据《数据中心设计规范》等标准，施工范围涵盖 10 类机房及配套设施，采用专业化施工团队与物资调配体系，强调标签规范、线缆隐藏等细节管理。运营阶段建立三方协同运维模式，针对三级故障制定30 分钟至 1 小时响应机制…...
C 语言学习笔记（数组）
C 语言基础：第 08天笔记 内容提要 数组 排序算法：冒泡排序二维数组字符数组 数组 冒泡排序 排序思想（向前冒泡）： 一次排好一个数，针对n个数，最差情况需要n - 1次就可以排好每次排序假定第一…...
openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞)
jvm安全点(二)openjdk17 c++源码垃圾回收安全点信号函数处理线程阻塞
1. 信号处理与桩代码（Stub） 当线程访问安全点轮询页（Polling Page）时： 触发 SIGSEGV 信号：访问只读的轮询页会引发 SIGSEGV 异常。信号处理函数：pd_hotspot_signal_handl…...
uni-app 开发HarmonyOS的鸿蒙影视项目分享：从实战案例到开源后台
最近，HBuilderX 新版本发布，带来了令人兴奋的消息——uni-app 现在支持 Harmony Next 平台的 App 开发。这对于开发者来说无疑是一个巨大的福音，意味着使用熟悉的 Vue 3 语法和开发框架，就可以为鸿蒙生态贡献自己的力量。 前言 作…...
【赵渝强老师】在PostgreSQL中访问Oracle
在PostgreSQL数据库中，oracle_fdw是PostgreSQL数据库支持的外部扩展。通过使用oracle_fdw扩展可以读取到Oracle数据库中的数据。它是一种非常方便且常见的PostgreSQL与Oracle的同步数据的方法。使用oracle_fdw扩展需要依赖Oracle的Instance Client环境。 视频讲解如…...
板凳-------Mysql cookbook学习 （二）
生成一个包含cookbook数据库中的表备份的名为backup.sql的dump文件。 sql C:\Users\lenovo>mysqldump -u root -p --default-character-setutf8mb4 cookbook > D:\sql\Mysql_learning\backup.sql mysqldump 不是内部或外部命令，也不是可运行的程序 或批处理文…...
sudo apt update是什么意思呢？
非常好的问题！ ✅ sudo apt update 是什么意思？ 它的作用是： 更新你的 Ubuntu 系统中软件列表的信息（但不安装软件） 就像你每天先去超市了解今天上架了哪些新商品（只是“查看”而不是“买”）&a…...
.NET Core 中 Swagger 配置详解：常用配置与实战技巧
随着微服务架构和 RESTful API 的广泛应用，API 文档的管理和自动化生成成为了开发中的重要部分。Swagger（现为 OpenAPI）是一款功能强大的工具，它可以自动生成 API 文档，并提供交互式 UI，帮助开发者、测试人…...
spring cache使用指南
Spring cache Spring Cache 是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解，就能实现缓存功能。 Spring Cache 提供了一层抽象，底层可以切换不同的缓存实现。 例如:EHCache，Caffeine，Redi…...
9.DMA
目录 DMA —为 CPU 减负 DMA 的简介和使用场景 DMA 的例子讲解 STM32 的 DMA 框图和主要特性 编辑 DMA 的通道的对应通道外设 – DMA 和哪些外设使用 编辑编辑ADC_DR 寄存器地址的计算 常见的数据滤波方法 ADCDMA 的编程 DMA —为 CPU 减负 DMA 的简介和使用场…...
Python自学笔记3 常见运算符
常用运算符 加减法 python的自动数据类型转换 整形转为浮点型 实数转为复数 数字类型不能和浮点数类型相加减 乘除法 数据转换基本同加减法， 但字符串可以和整数相加减，作用是字符串的自我复制 反斜杠 成员运算符 判断一个元素是不是一个序列的成员…...
【C/C++】C++中constexpr与const的深度对比
文章目录 C中constexpr与const的深度对比1. 编译期确定性2. 更严格的优化保证3. 适用范围更广4. 类型安全与错误检查5. 现代 C 的演进方向何时使用 const？constexpr应用场景1. 配置常量与全局参数2. 数据验证与业务规则检查3. 数学计算与业务逻辑优化4. 模板元编程与…...
劳特巴赫trace32负载率测试
按照下图步骤点击即可...
牛客OJ在线编程常见输入输出练习--Java版
目录 一、链接 二、题目 一、链接 牛客输入输出链接：牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推，求职就业一站解决_牛客网 二、题目 1.只有输出 public class Main {public static void main(String[] args) {System.out.println("H…...
STM32 | FreeRTOS 递归信号量
递归信号量 一、概述 互斥量的使用比较单一，因为它是信号量的一种，并且它是以锁的形式存在。在初始化的时候，互斥量处于开锁的状态，而被任务持有的时候则立刻转为闭锁的状态。 递归类型的互斥量可以被拥有者重复获取。拥有互斥量…...
STM32 | 软件定时器
01 一、概述 软件定时器是用程序模拟出来的定时器，可以由一个硬件定时器模拟出成千上万个软件定时器，这样程序在需要使用较多定时器的时候就不会受限于硬件资源的不足，这是软件定时器的一个优点，即数量不受限制。但由于软件定…...
2025年EB SCI2区TOP，多策略改进黑翅鸢算法MBKA+空调系统RC参数辨识与负载聚合分析，深度解析+性能实测
目录 1.摘要2.黑翅鸢优化算法BKA原理3.改进策略4.结果展示5.参考文献6.代码获取7.读者交流 1.摘要 随着空调负载在电力系统中所占比例的不断上升，其作为需求响应资源的潜力日益凸显。然而，由于建筑环境和用户行为的变化，空调负载具有异质性和…...
互联网大厂Java面试：从Spring到微服务的全面探讨
文章简述 本文模拟了一个互联网大厂Java求职者的面试场景，涵盖了Java核心语言与平台、构建工具、Web框架、微服务与云原生等多个技术栈。通过面试问答的形式，展示了在真实业务场景下如何应用这些技术点，帮助初学者理解和学习。 场景介绍 在…...
--playwright浏览器自动化)
Python爬虫之路(14)--playwright浏览器自动化
playwright 前言 你有没有在用 Selenium 抓网页的时候，体验过那种「明明点了按钮，它却装死不动」的痛苦？或者那种「刚加载完页面，它又刷新了」的抓狂？别担心，你不是一个人——那是 Selenium 在和现代前…...
Elasticsearch Fetch阶段面试题
Elasticsearch Fetch阶段面试题 🚀 目录 基础原理性能优化错误排查场景设计底层机制总结基础原理 🔍 面试题1：基础原理 题目： 请描述Elasticsearch分布式搜索中Query阶段和Fetch阶段的工作流程，为什么需要将搜索过程拆分为这两个阶段？ 👉 点击查看答案 查询流程…...
RAGFlow Arbitrary Account Takeover Vulnerability
文章目录 RAGFlowVulnerability Description[1]Vulnerability Steps[2]Vulnerability Steps[3]Vulnerability Steps RAGFlow RAGFlow is an open-source RAG (Retrieval-Augmented Generation) engine developed by Infiniflow, focused on deep document understanding and d…...
框架之下再看HTTP请求对接后端method
在当今的软件开发领域，各类框架涌现，极大地提升了开发效率。以 Java 开发为例，Spring 框架不断演进，Spring Boot 更是简化到只需引入 Maven 包，添加诸如SpringBootApplication、RestController等注解，就能轻…...
机器学习中的过拟合及示例
文章目录 机器学习中的过拟合及示例1. 过拟合的定义2. 过拟合的常见例子例1：图像分类中的过拟合例2：回归任务中的过拟合例3：自然语言处理（NLP）中的过拟合 3. Python代码示例：过拟合的直观演示示例1…...
机器学习-人与机器生数据的区分模型测试 -数据筛选
内容继续机器学习-人与机器生数据的区分模型测试 使用随机森林的弱学习树来筛选相对稳定的特征数据 # 随机森林筛选特征 X data.drop([city, target], axis1) # 去除修改前的城市名称列和目标变量列 y data[target] X_train, X_test, y_train, y_test train_test_split(X…...
第9讲、深入理解Scaled Dot-Product Attention
Scaled Dot-Product Attention是Transformer架构的核心组件，也是现代深度学习中最重要的注意力机制之一。本文将从原理、实现和应用三个方面深入剖析这一机制。 1. 基本原理 Scaled Dot-Product Attention的本质是一种加权求和机制，通过计算查询(Query…...
无监督学习在医疗AI领域的前沿：多模态整合、疾病亚型发现与异常检测
引言 人工智能技术在医疗领域的应用正经历着从辅助决策向深度赋能的转变。无监督学习作为人工智能的核心范式之一，因其无需大量标注数据、能够自动发现数据内在规律的特性，在医疗AI领域展现出独特优势。尤其在2025年，无监督学习技术在医疗AI应用中呈现出多模态整合、疾病亚…...
PostgreSQL内幕剖析——结构与架构
大家好，这里是失踪人口bang__bang_，从今天开始持续更新PostgreSQL内幕相关内容，让我们一起了解学习吧✊！ 目录 1️⃣ DB集群、数据库、表 🍙 数据库集群的逻辑结构 🍙 数据库集群的物理结构 &am…...
架构师论文《论模型驱动架构软件开发方法及其应用》
摘要 在当前的软件开发领域，模型驱动架构（MDA）作为一种重要的开发方法，强调通过抽象化模型指导系统设计与实现，能够有效提升开发效率并降低复杂性。本文结合笔者参与的某医疗信息管理系统的开发实践，探讨MD…...
当硅基存在成为人性延伸的注脚：论情感科技重构社会联结的可能性
在东京大学机器人实验室的档案室里，保存着一份泛黄的二战时期设计图——1943年日本陆军省秘密研发的“慰安妇替代品”草图。这个诞生于战争阴霾的金属躯体，与2025年上海进博会上展出的MetaBox AI伴侣形成时空对话：当人类将情感需求投射于硅基…...