CSS3-相对定位

python_198 python_198 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 100+累计阅读 116平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄3年
关注
原创 最新推荐文章于 2026-08-06 12:55:02 发布 116 阅读 AI 写同款· GEO 优化 ›
[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页 网页标题：固定定位 　 网页标题：相对定位relative 　 网页标题：绝对定位absolute 　 网页标题：层定位的应用 阅读详情

一、定位布局

二、相对定位

1、特点

2、z-index属性

在z轴方向上，堆叠

举例：

设置z-index属性

图2就被图三盖住了

三、总结

收录于
HTML5+CSS3模块

当前文章被收录于：

HTML5+CSS3模块
17 篇文章 0 人学习

欢迎来到“HTML5+CSS3模块“分类专栏！这个专栏将为您提供有关HTML5和CSS3最新动态、技术资讯、案例展示、教程解析以及相关领域的前沿知识。在这里，您可以了解到如何利用HTML5和CSS3的强大功能来提升网页性能、实现响应式设计、增强用户体验，以及如何利用这些技术进行创新性的网页开发。

订阅专栏 查看详情
标签
#css3 #前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
【CSS in Depth 2 精译_039】6.3 CSS 定位技术之：相对定位（上） 本篇主要介绍了CSS的相对定位技术（relative positioning），通过一个下拉菜单的简单示例，详细讨论了相对定位的特点及适用场景，以及应用过程中需要考虑的一些问题（如页面可访问性等）。本节对上一版作了大幅更新，最后还针对正文提到了一个功能点进行了补充完善。感兴趣的朋友不妨动手试试，一定会有新的收获。建议先收藏！ 阅读详情

相关推荐

最新虚拟串口 Virtual Serial Port Driver V11.0.1068 已经汉化

Virtual Serial Port Driver 11.0.1047 是一款功能强大的虚拟串口驱动程序，专为需要在开发和测试环境中模拟物理串口连接的用户设计。该版本于2023年4月5日发布，主要修复了在导入无效的COM端口捆绑设置时导致的崩溃问题，并优化了软件的自动更新功能。通过使用Virtual Serial Port Driver，用户可以在不依赖物理硬件的情况下，轻松创建和管理虚拟串口，极大地提高了开发和测试的效率。

中游鱼的博客 3万+

Web前端HTML5+CSS3知识点（4）超链接和相对路径

1. 超链接 页面跳转。使用<a>标签。也是行内元素。在a标签中可以嵌套它自身外的任何元素。 -href属性，用来指定跳转的路径。 -href的值可以是外部网页的一个地址，也可以写一个内部页面的地址。 2.跳转到当前页面其他位置 -最好使用相对路径 2. 相对路径 1.一般当我们需要跳转到一个服务器的内部页面时，都会使用相对路径 2.相对路径都会使用./或…/开头，当没有写./或…/时，默认使用了. 表示当前文件所在的目录，表示当前文件所在目录的上一级目录。 3. 超链接属性 1.t

codest的专栏 839

HTML <img>使用说明-相对路径与绝对路径

1.相对路径 外网相对路径： src="/i/eg_tulip.jpg" alt="小妞妞" /> 本地相对路径（两个同级的文件）可以直接访问如： 2.绝对路径 外网绝对路径： 本地磁盘绝对路径需要加“file:///"前缀，如：  点击页面右键，查看源代码：

boonyaxnn的博客 6265

告别密码本！用Windows NPS给华为/华三交换机做Radius认证，SSH登录更安全

本文详细介绍了如何利用Windows NPS实现华为/华三交换机的Radius认证，提升SSH登录安全性。通过集中化管理、精细化控制和完整审计追踪，企业可告别传统密码本，大幅提升网络设备管理效率。文章包含NPS服务部署指南、交换机配置详解及调试技巧，助力企业构建安全高效的统一认证体系。

weixin_42549723的博客 421

医学影像AI的幻觉问题与CCD解决方案

医学影像AI在辅助诊断中面临的核心挑战是幻觉现象，即模型生成不符合实际影像的虚假诊断。这种现象源于多模态大语言模型(MLLMs)在视觉-语言对齐上的技术局限，可能导致假阳性或假阴性的临床风险。通过临床对比解码(CCD)框架，结合症状锚定和专家引导的双阶段校准机制，可有效提升模型输出的可靠性。该技术在CheXpert和MIMIC-CXR等标准数据集上验证，显著改善了肺不张、胸腔积液等关键指标的检测准确率。对于医疗AI落地场景，这种即插即用的解决方案既规避了数据隐私合规问题，又降低了基层医院的部署门槛，为AI辅

weixin_36303807的博客 322

CSS、JS中的相对路径引用

　　初学者由于对一些比较基本的知识的把握不是很牢，所以在开发或者设计的时候，往往很容易出现一些错误或者异常现象而找不到出错的根源。记得自己刚刚java入门的时候，会出现一些很“离奇”的现象，然后一遍一遍查看自己的代码，一步一步的进行调试（当然那个时候的调试方式也只是从初学这的角度上而言的，大多是比较粗略的手段），还是发现不了哪里出了问题，这直接打击学习的积极性。甚至有时候，照着书本或者教...

weixin_30329623的博客 771

鸿蒙子系统解读-分布式软总线子系统初步研究（下）

鸿蒙子系统解读-分布式软总线子系统初步研究（下） 本文作者：江苏润和软件股份有限公司 郎建中 3.2. 数据传输 上一节我们看了PublishService()函数的代码实现过程。被发现端发布服务后，软总线回调发布成功的函数中，被发现端需要使用CreateSessionServer()来创建会话的服务器等待发现端的连接创建会话。下面我们就来分析CreateSessionServer()函数的实现过程。 数据传输部分的代码位于foundation/communication/services/softbus

weixin_47070198的博客 3091

CSS中的相对路径与绝对路径

css中的相对路径与绝对路径

欢乐的马的博客 4713

SAPIEN ManiSkill3 入门教程（一）

请注意，table.set_pose(pose) 设置的是演员在世界帧中的坐标系姿势。移除的实体可以再次添加到场景中，但已在场景中的实体则不能再次添加。显示器可以是物理的（如显示器），也可以是虚拟的（如 VNC）。我们可以通过 get_pose()、get_linear_velocity() 和 get_angular_velocity()获取演员的运动量（姿势、线速度、角速度）。现在，让我们创建一个斜坡。例如，您可能需要一个简单的碰撞形状来进行快速模拟，但却需要一个复杂的视觉形状来进行逼真的渲染。

机器人控制与仿真应用 3078

华为OD机试真题 新系统2026-04-15 Python&JS 实现【失灵的键盘】

有一个键盘有2个按键失灵了，按下这些键时会连续输出其他键对应的字符两次。具体如下: 1. 按下j键一次，屏幕上显示uu(两个连续的u);  按下b键一次，屏幕上显示t(两个连续的t) 2. u键和t键是好的，按下u键一次时，屏幕只会显示一次u(正常按键);按下t键一次时，屏幕只会显示一次t(正常按键) 3. 假定屏幕上连续显示两个t一定是按了一次b键，而不是两次t键;假定按键t之后不会紧接着按键b，即tttt转义为两个b，而不可能是tb

MISAYAONE的博客 525

html/css相对路径引用/、../、../../、/..、/../..、同级、下级、标准写法

/ 代表根目录，慎用 ../ 代表上一级目录 ../../ 代表上两级目录 /.. 代表下级目录 /../.. 代表下两级目录 标准写法： 同级 直接引用文件名 下级 同级目录/下级目录/文件名

1万+

Python爬虫实战：2026最新版淘宝商品详情页数据抓取与价格监控

在2026年的今天，电商数据已经成为商业决策、市场分析和价格策略制定的核心资产。淘宝作为中国最大的电商平台之一，其商品详情页包含了海量有价值的信息：商品标题、价格、销量、评价数、店铺信息、SKU属性等。对于从事电商运营、竞品分析、价格监控的从业者来说，能够高效、稳定地获取这些数据至关重要。然而，淘宝平台的反爬虫策略在2026年已经演进到了相当成熟的阶段。

2201_76125261的博客 891

CSS3 相对定位

偏移特性： top和bottom同时设置时，top优先 left和right同时设置时，left优先（LTR情况下）

徐尧的博客 823

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

CSS3中相对定位和绝对定位

position:absolute;这个是绝对定位； 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative;是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如：&amp;amp;amp;lt;div class=...

恬静的男子的博客 1446

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

css3的相对定位(一)

当定位为relative时表示的是这个盒子相较于自己本应该在的位置产生偏移 例如：当盒子没有相对定位并产生偏移时的位置 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>没有相对定位</title> <style> bo...

u014387696的博客 332

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

HTML5+CSS3学习笔记（五）相对定位、绝对定位、固定定位、粘滞定位【附练习：轮播图】

相对定位、绝对定位、固定定位、粘滞定位【附练习：轮播图】

Yeee_F 660

CSS3的相对定位(二)

上一篇博客讲了相对定位的参照点是自己本身应该在的位置，那问题来了，若是有个盒子进行了相对定位，并有了偏移，那对下面的盒子有什么影响呢？ 今天这个博客，就是探讨在发生相对定位的盒子对于其他盒子的干扰 实验代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit...

u014387696的博客 217

CSS3之定位，相对定位，绝对定位，固定定位

前端在绘制UI界面时，总会遇到一些比较特殊的需求，例如，指定某个DIV在特定的位置，或是用户在界面进行某些操作后想要某个或某些DIV去到某个位置，这个时候，用CSS3的定位方法position就能快速的实现这个效果。

weixin_47974251的博客 741

CSS3网页定位技术（2）——相对定位

二：position: relative;——相对定位 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .demo{

abraham的博客 8933

css3 定位---相对定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...

qq_14993591的博客 271

CSS3的绝对定位与相对定位

一、position 的四个值：static、relative、absolute、fixed。 绝对定位：absolute 和 fixed 统称为绝对定位 相对定位：relative 默认值：static 二、relative定位与absolute定位的区别 实例： HTML代码： css代码： 初始效果： 1、relative：相对于原来位置移动，元素设...

KK_2018的技术博客_程序员不止是程序员 656

css3基础100问之相对定位究竟是怎样定位的呢？（36）

相对定位是相对与谁呢究竟？ 这是原来的盒子位置。 相对定位后： 原来的是红线框内，可是后面的并没有占领。也就是说保留了原来的位置。 因此，相对定位并没有脱标，他是给绝对定位来作父级的。 ...

weixin_45147894的博客 104

Css规范整理：3.4、常规流布局：相对定位

相对定位 （postion:relative) 当一个盒根据<u>常规流</u>或者<u>浮动</u>摆放好后，它可能会相对于该位置移动，称之为相对定位。 对其他盒的影响：用这种方式偏移盒(B1)的位置不影响盒(B2)，遵循：给定B2位置时就当B...

202

CSS相对定位3大应用场景5个实战应用案例详解

我发现，作为学习Web前端开发的同学最大的痛苦莫过于，学了一堆知识，但到了实际的应用开发中不知道如何灵活运用。今天决定再上一干货，一个个来讲清楚关于定位系列实际应用场景，先从相对定位position: relative;开始相对定位3大应用场景：微调元素位置、提升元素层级、作为绝对定位元素参考对象相对定位5个应用案例：搜索框、图文对齐、滑动动画、弹性菜单、柱形图正在上传…重新上传取消定位作为css中非常重要的一个知识点，在实际开发中那就像家常菜一样，时时都会出现，同时在面试中也是200%会被问到的。

艾编程带你学前端博客 720

CSS相对定位

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="father"> <div cla

weixin_45672377的博客 200
上一篇： CSS3-清除浮动
下一篇： CSS3-绝对定位
点赞 0
评论 1
书签 书签 0
python_198
python_198
博客等级 码龄3年 359粉丝 112原创
+ 关注 专栏目录 订阅专栏
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

python_198

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值