当前位置： 首页 > news >正文

CSS中相对定位与绝对定位的区别及作用

news 2026/5/18 19:25:43

CSS中相对定位与绝对定位的区别及作用

  • 场景复现
  • 核心干货
    • 相对定位
    • 绝对定位
    • 子绝父相🔥🔥
    • 定位总结
    • 绝对定位与相对定位的区别

场景复现

在学习前端开发的过程中，熟练掌握页面布局和定位是非常重要的，因此近期计划出一个专栏，详细讲述如何优雅高效地实现前端页面布局和渲染。包括css中的相对定位和绝对定位，好用的flex布局和grid布局，以及自适应宽高等等实用干货，文章从基础知识到项目实战，层层递进帮助学习前端技术。本期文章主要介绍的是CSS中的相对定位与绝对定位，包括相关用法和区别。

核心干货

定位的作用：实现某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子。

相对定位

相对定位可以理解为“相对于”它的起点进行移动

语法：

选择器{ position:relative;}

代码示例：👇👇👇👇
html部分：

<div class="box1"></div>
<div class="box2"></div>

css部分：

    .box1 {width: 200px;height: 200px;background-color: aquamarine;}.box2 {width: 200px;height: 200px;background-color: rgb(0, 203, 254);}

效果图：
在这里插入图片描述
此时我们为其中一个盒子添加相对定位👇👇
css部分：

    .box1 {/* 相对定位*/position: relative; top: 50px;left: 50px;width: 200px;height: 200px;background-color: aquamarine;}

效果图：
在这里插入图片描述

总结：

  • 相对定位实际是元素相对自己原来的位置移动，参照物是自己
  • 另外一个元素不脱标，继续保留原来的位置

绝对定位

绝对定位可以理解为一浏览器为父节点来定位自己

语法：

选择器{ position:absolute;}

代码示例：👇👇👇👇
html部分：

<div class="box4"></div>

css部分：

.box4 {width: 200px;height: 200px;background-color: rgb(255, 161, 60);}

下面我们为这个盒子添加绝对定位👇👇
css部分：

    .box4 {/* 绝对定位*/position: absolute;left: 0;bottom: 0;width: 200px;height: 200px;background-color: rgb(255, 161, 60);}

效果图：
在这里插入图片描述
不难发现，橙色的盒子相对于浏览器页面绝对定位，距离底部和左侧都是0px的距离。

绝对定位的特点：

  • 1、若没有父级元素或父级元素没有定位，则以浏览器为准定位；
  • 2、如果父级元素有定位，则以最近一级的有定位父级元素为参考点移动位置；
  • 3、绝对定位不占有原先位置。

子绝父相🔥🔥

  • ①子级绝对定位，不会占有位置，可以放到父级盒子的任何一个地方，不会影响其他盒子；
  • ②父级盒子需要加定位限制子盒子在父级盒子内显示；
  • ③父级盒子布局时，需要占有位置，因此父级只能是相对定位。

代码示例：👇👇👇👇
html部分：

<div>----------------绝对定位------------</div>
<div class="box3"><div class="box4"></div></div>

css部分：

    .box3 {position: relative; width: 300px;height: 300px;background-color: rgb(178, 96, 255);}.box4 {/* 绝对定位*/position: absolute;left: 0;bottom: 0;width: 200px;height: 200px;background-color: rgb(255, 161, 60);}

效果图：
在这里插入图片描述

如果我们将父元素里面的相对定位去掉，就会呈现下面的效果：
在这里插入图片描述

如果将子元素的绝对定位去掉，保留父元素的相对定位，就会呈现如下效果：👇👇
在这里插入图片描述

定位总结

在这里插入图片描述

绝对定位与相对定位的区别

绝对定位使元素的位置与文档流无关，因此不占据空间。可以理解为绝对定位将元素从原来位置拿走，后面的元素就会占据绝对定位元素的位置。如同排队一样，前面的人走了，后面的人就会前进占去离开的人的位置。

代码示例：

    <style>body {background-color: aquamarine;}.box {width: 100px;height: 100px;background-color: pink;float: left;margin: 15px;}.two {position:absolute;left: 20px;top: 20px;}</style>
</head>
<body>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</body>

效果图：
在这里插入图片描述

相对定位与绝对定位相反，它移动后原本所占的空间仍保留。可理解为它进行定位后，之前的位置后面的元素不可占据。如同私人车库停车一样，车子离开后，别的车不可以停在那个车库。

代码示例：

    <style>body {background-color: aquamarine;}.box {width: 100px;height: 100px;background-color: pink;float: left;margin: 15px;}.two {position:relative;left: 20px;top: 20px;}</style>
</head>
<body>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</body>

效果图：
在这里插入图片描述

以上就是关于CSS相对定位和绝对定位相关知识的分享，相信看完这篇文章的小伙伴们一定有了一定的收获。当然，可能有不足的地方，欢迎大家在评论区留言指正！

感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

在这里插入图片描述

相关文章：

CSS中相对定位与绝对定位的区别及作用

CSS中相对定位与绝对定位的区别及作用 场景复现核心干货相对定位绝对定位子绝父相&#x1f525;&#x1f525;定位总结绝对定位与相对定位的区别 场景复现 在学习前端开发的过程中&#xff0c;熟练掌握页面布局和定位是非常重要的&#xff0c;因此近期计划出一个专栏&#xff…...

编程日记 2023/4/21 1:03:39

7.1 基本运放电路（1）

集成运放的应用首先表现在它能构成各种运算电路上&#xff0c;并因此而得名。在运算电路中&#xff0c;以输入电压作为自变量&#xff0c;以输出电压作为函数&#xff1b;当输入电压变化时&#xff0c;输出电压将按一定的数学规律变化&#xff0c;即输出电压反映输入电压某种运…...

编程日记 2023/4/21 0:58:37

交友项目【首页推荐，今日佳人，佳人信息】

目录 1&#xff1a;首页推荐 1.1&#xff1a;接口地址 1.2&#xff1a;流程分析 1.3&#xff1a;代码实现 2&#xff1a;今日佳人 1.1&#xff1a;接口地址 1.2&#xff1a;流程分析 1.3&#xff1a;代码实现 3&#xff1a;佳人信息 1.1&#xff1a;接口地址 1.2&am…...

编程日记 2023/4/21 0:53:36

kafka-5 kafka的高吞吐量和高可用性

kafka的高吞吐量和高可用性 6.1 高吞吐量6.2 高可用&#xff08;HA&#xff09; 6.1 高吞吐量 kafka的高吞吐量主要是由4方面保证的&#xff1a; &#xff08;1&#xff09;顺序读写磁盘 Kafka是将消息持久化到本地磁盘中的&#xff0c;一般人会认为磁盘读写性能差&#xff…...

编程日记 2023/4/21 0:48:35

Jmeter前置处理器和后置处理器

1. 后置处理器(Post Processor) 本质上是⼀种对sampler发出请求后接受到的响应数据进⾏处理 &#xff08;后处理&#xff09;的⽅法 正则表达式后置处理器 &#xff08;1&#xff09;引⽤名称&#xff1a;下⼀个请求要引⽤的参数名称&#xff0c;如填写title&#xff0c;则可…...

编程日记 2023/5/30 6:19:56

手把手带你了解《线程池》

文章目录 线程池的概念池的目的线程池的优势为什么从池子里拿线程更高效&#xff1f;构造方法参数讲解线程拒绝策略模拟实现线程池一个线程池设置多少线程合适&#xff1f; 线程池的概念 线程池&#xff1a;提前把线程准备好&#xff0c;创建线程不是直接从系统申请&#xff0…...

编程日记 2023/4/21 0:38:31

idea中使用git工具

目录 一、IDEA中配置git二、git操作将项目设置成git仓库 一、IDEA中配置git 打开idea&#xff0c;点击File–>Settings 点击版本控制&#xff0c;然后点击git 将你的git.exe安装目录填到下面位置 点击test可以看到显示了版本&#xff0c;说明配置成功 二、git操作 将项目设…...

编程日记 2023/4/21 0:33:31

剖析DLL(动态链接库)的使用方法

为了更好地理解和应用dll&#xff0c;我们首先需要了解dll的概念和原理。 一、dll&#xff08;Dynamic Link Library&#xff09;的概念 dll是一种动态链接库&#xff0c;它是在Windows操作系统中广泛使用的一种机制&#xff0c;它允许程序在运行时调用动态链接库中的函数。d…...

编程日记 2023/4/21 0:28:30

第二章 设计模式七大原则

文章目录 前言一、单一职责 &#x1f367;1、单一职责原则注意事项和细节2、代码实现2、1 错误示例2、2 正确示例但有缺陷2、3 最终形态 二、接口隔离原则 &#x1f969;1、代码示例 三、依赖倒转原则 &#x1f965;1、代码示例2、依赖关系传递的三种方式 四、里氏替换原则 &am…...

编程日记 2023/4/21 0:23:28

计网第五章.运输层—TCP报文的首部

以下来自湖科大计算机网络公开课笔记及个人所搜集资料 TCP报文格式如下&#xff1a; 那6个标志位对应的中文名&#xff1a; 下面是按TCP首部的顺序介绍各个字段&#xff1a; 源端口和目的端口分别是表示发送TCP报文段的应用进程。从网络编程角度&#xff0c;进程里创建sock…...

编程日记 2023/4/21 0:18:27

程序员最新赚钱指南！

程序员们的主要收入来源 1️⃣首先&#xff0c;我们要明白程序员无论编程开发多么努力&#xff0c;随着时间推移&#xff0c;受年龄、生活、健康等因素&#xff0c;程序员们都会面临职业天花板&#xff0c;这是大多数人不可规避的一个事实。 2️⃣其次&#xff0c;这几年因为…...

编程日记 2023/4/21 0:13:25

如何快速获取淘宝商品的详细信息？看这里就够了

taobao.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,item_get,item_search_shop等]cacheString否[yes,…...

编程日记 2023/4/21 0:08:24

id生成器

使用说明 ⚠️ 所有使用id的业务场景&#xff0c;应该在数据库层设置合理的唯一索引 功能 自增id 基于 redis 自增 redis 中的key为&#xff1a;[spring.application.name].idGenetate.[key] ⚠️ key 在不同的业务不应该重复使用&#xff0c;否则单号无法连续使用 private f…...

编程日记 2023/4/21 0:03:23

为什么许多人吐槽C++11,那些语法值得我们学习呢？

致前行的人&#xff1a; 人生像攀登一座山&#xff0c;而找寻出路&#xff0c;却是一种学习的过程&#xff0c;我们应当在这过程中&#xff0c;学习稳定冷静&#xff0c;学习如何从慌乱中找到生机。 目录 1.C11简介 2.统一的列表初始化 2.1 &#xff5b;&#xff5d;初始化 …...

编程日记 2023/4/20 23:58:22

千耘农机导航的“星地一体”能力究竟是什么？

伴随农业机械化和智能化的发展&#xff0c;越来越多的人开始使用农机自动驾驶系统助力耕作&#xff0c;千耘农机导航的“星地一体”能力可有效解决信号受限的问题&#xff0c;实现作业提效。究竟什么是“星地一体”&#xff0c;又是如何解决智能化农机作业的痛点的&#xff1f;…...

编程日记 2023/4/20 23:53:20

（数字图像处理MATLAB+Python）第四章图像正交变换-第四、五节：Radon变换和小波变换

文章目录 一&#xff1a;Radon变换&#xff08;1&#xff09;Radon变换原理&#xff08;2&#xff09;Radon变换实现&#xff08;3&#xff09;Radon变换性质&#xff08;4&#xff09;Radon变换应用 二&#xff1a;小波变换&#xff08;1&#xff09;小波A&#xff1a;定义B&a…...

编程日记 2023/4/20 23:48:19

舌体胖瘦的自动分析-曲线拟合-或许是最简单判断舌形的方案（六）

返回至系列文章导航博客 1 简介 在中医智能舌诊项目中需要舌体胖瘦的自动分析 舌体胖瘦是中医诊断中重要的观察依据&#xff0c;。胖大舌“舌色淡白&#xff0c;舌体胖嫩&#xff0c;比正常舌大而厚&#xff0c;甚至充满口腔”&#xff0c;主脾肾阳虚&#xff0c;气化失常&am…...

编程日记 2023/4/20 23:43:17

牛顿法、梯度下降法与拟牛顿法

牛顿法、梯度下降法与拟牛顿法 0 引言1 关于泰勒展开式1.1 原理1.2 例子 2 牛顿法2.1 x 为一维2.2 x 为多维 3 梯度下降法4 拟牛顿法4.1 拟牛顿条件4.2 DFP 算法4.3 BFGS 算法4.4 L-BFGS 算法 0 引言 机器学习中在求解非线性优化问题时&#xff0c;常用的是梯度下降法和拟牛顿…...

编程日记 2023/4/20 23:38:15

带你浅谈下Quartz的简单使用

Scheduler 每次执行&#xff0c;都会根据JobDetail创建一个新的Job实例&#xff0c;这样就可以规避并发访问的问题&#xff08;jobDetail的实例也是新的&#xff09; Quzrtz 定时任务默认都是并发执行&#xff0c;不会等待上一次任务执行完毕&#xff0c;只要间隔时间到就会执…...

编程日记 2023/4/20 23:33:14

C++ cout格式化输出

称为“流操纵算子”&#xff09;&#xff0c;使用更加方便。 C cout成员方法格式化输出 《C输入流和输出流》一节中&#xff0c;已经针对 cout 讲解了一些常用成员方法的用法。除此之外&#xff0c;ostream 类中还包含一些可实现格式化输出的成员方法&#xff0c;这些成员方法…...

编程日记 2023/4/20 23:28:11

ElevenLabs动画配音语音交付危机预警，紧急修复唇动不同步、语速断层、多语言混读错位的6大实时响应方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs动画配音语音交付危机的本质溯源 当动画制作团队依赖 ElevenLabs API 实时生成角色语音时&#xff0c;突然出现的 429 Too Many Requests 响应、TTS 音频静音片段、以及语音情感断层现象&…...

编程新知 2026/5/18 19:20:25

Python 簡單的 股市資料 API 呼叫範例

前言 假如我們想從某個外部服務取得股市資料&#xff0c;藉由Python API 呼叫&#xff0c;可以讓我們從雅虎財經的API下載市場數據。以下簡單得介紹一個API &#xff0c; yfinance 一個 Python 開源函式庫&#xff0c;使用者可以輕鬆地取得股票、指數、貨幣、ETF、基金以及期貨…...

编程新知 2026/5/18 19:14:21

通过环境变量管理多个 Taotoken API Key 以实现访问控制

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过环境变量管理多个 Taotoken API Key 以实现访问控制 在开发过程中&#xff0c;我们常常需要为不同的应用、不同的环境&#xf…...

编程新知 2026/5/18 18:39:01

从零到一：手把手完成Keil5 MDK环境搭建与ST-LINK驱动配置

1. 开发环境搭建前的准备工作 第一次接触STM32开发的朋友们&#xff0c;看到各种专业术语可能会有点懵。别担心&#xff0c;我刚开始也是这样。咱们先理清几个基本概念&#xff1a;Keil MDK是ARM公司推出的专业嵌入式开发工具&#xff0c;ST-LINK则是ST官方推出的调试下载器。…...

编程新知 2026/5/18 17:33:47

淘宝淘金币自动化脚本：解放双手的智能任务助手技术解析

淘宝淘金币自动化脚本&#xff1a;解放双手的智能任务助手技术解析 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本&#xff0c;包含蚂蚁森林收取能量&#xff0c;芭芭农场全任务&#xff0c;解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 淘宝…...

编程新知 2026/5/18 16:27:04

古典戏曲研究新范式，NotebookLM+《牡丹亭》原始刻本实测：自动生成曲牌-情感-舞台调度三维映射表

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM戏剧研究辅助的范式革命 传统戏剧研究长期依赖人工文本细读、跨剧目比对与历史语境重建&#xff0c;耗时冗长且易受主观经验局限。NotebookLM 的引入&#xff0c;标志着从“线性阅读—笔记摘…...

编程新知 2026/5/18 16:16:36

独立开发者如何利用 Taotoken 统一管理多个 AI 项目支出

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用 Taotoken 统一管理多个 AI 项目支出 对于同时维护多个小型 AI 应用或实验项目的独立开发者而言&#xff0c;成…...

编程新知 2026/5/18 16:05:59

HiveWE魔兽地图编辑器：5分钟快速上手指南，告别卡顿创作新时代

HiveWE魔兽地图编辑器&#xff1a;5分钟快速上手指南&#xff0c;告别卡顿创作新时代 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为《魔兽争霸III》原版地图编辑器缓慢的加载速度和繁琐的操作而烦恼…...

编程新知 2026/5/18 15:40:05

别再为‘No module named matlab.engine’抓狂了！手把手教你MATLAB与Python版本匹配与绑定（附Anaconda虚拟环境指南）

彻底解决MATLAB与Python版本冲突&#xff1a;从原理到实战的完整指南 当你兴奋地想在Python中调用MATLAB强大的信号处理功能时&#xff0c;突然跳出的"No module named matlab.engine"错误提示就像一盆冷水浇下来。这不是简单的安装问题&#xff0c;而是两个生态系统…...

编程新知 2026/5/18 15:33:43

期权量化交易基础库：模块化设计与回测实战指南

1. 项目概述&#xff1a;一个为期权交易者打造的“地基” 如果你在量化交易或者期权策略开发领域摸爬滚打过一段时间&#xff0c;大概率会和我有同样的感受&#xff1a;每次想测试一个新想法&#xff0c;都得从零开始搭建数据接口、计算希腊字母、管理仓位、回测框架……这些重…...

编程新知 2026/5/18 15:16:23