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

CSS定位详解上

article 2026/3/22 20:28:38

1. 相对定位

1.1 如何设置相对定位？
给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
1.2 相对定位的参考点在哪里？
相对自己原来的位置
1.3 相对定位的特点：
1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。 

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01_相对定位</title><style>.outer{width: 500px;background-color: aquamarine;border: 1px solid black;padding: 20px;}.box{width: 100px;height: 100px;font-size: 20px;}.box1 {background-color: red;}.box2 {background-color: green;position: relative;left: 10px;}.box3 {background-color: hotpink;}</style>
</head>
<body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
</body>
</html>

 注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

2. 绝对定位

2.1 如何设置绝对定位？
给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位的参考点是参考它的 包含块 。

什么是包含块？
1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）

口诀：子绝父相(子元素开启绝对定位，父元素就要开启相对定位)

鼠标浮动在父元素上，盒子2向右移动200px

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02_绝对定位</title><style>.outer {width: 500px;background-color: aquamarine;border: 1px solid black;padding: 20px;position: relative;}.box {width: 100px;height: 100px;font-size: 20px;}.box1 {background-color: red;}.box2 {background-color: green;/* 给2开启了绝对定位，他就脱离了文档流 3就占领了2的位置 */position: absolute;}.box3 {background-color: hotpink;}.outer:hover .box2{right: 200px;}</style>
</head><body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>
</body></html>

相关文章：

CSS定位详解上

1. 相对定位 1.1 如何设置相对定位&#xff1f; 给元素设置 position:relative 即可实现相对定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。 1.2 相对定位的参考点在哪里&#xff1f; 相对自己原来的位置 1.3 相对定位的特点&#xff1…...

编程日记 2026/3/22 20:28:38

DeepSeek、Grok 和 ChatGPT 对比分析：从技术与应用场景的角度深入探讨

文章目录 一、DeepSeek&#xff1a;知识图谱与高效信息检索1. 核心技术2. 主要特点3. 应用场景4. 实际案例 二、Grok&#xff1a;通用人工智能框架1. 核心技术2. 主要特点3. 应用场景4. 实际案例 三、ChatGPT&#xff1a;聊天机器人与通用对话系统1. 核心技术2. 主要特点3. 应用…...

编程日记 2026/3/22 10:21:57

Unix Domain Socket和eventfd

在Linux开发中&#xff0c;Unix Domain Socket和eventfd是两种不同的通信机制&#xff0c;它们的设计目标和适用场景有显著差异。以下分点解释并配合示例说明&#xff1a; 一、Unix Domain Socket&#xff08;UDS&#xff09; 1. 是什么&#xff1f; 一种**本地进程间通信&am…...

编程日记 2026/3/19 9:10:37

【万字长文】基于大模型的数据合成(增强）及标注

写在前面 由于合成数据目前是一个热门的研究方向&#xff0c;越来越多的研究者开始通过大模型合成数据来丰富训练集&#xff0c;为了能够从一个系统的角度去理解这个方向和目前的研究方法便写了这篇播客&#xff0c;希望能对这个领域感兴趣的同学有帮助&#xff01; 欢迎点赞&…...

编程日记 2026/3/20 6:08:28

2025年能源工作指导意见

2025年是“十四五”规划收官之年&#xff0c;做好全年能源工作意义重大。为深入贯彻落实党中央、国务院决策部署&#xff0c;以能源高质量发展和高水平安全助力我国经济持续回升向好&#xff0c;满足人民群众日益增长的美好生活用能需求&#xff0c;制定本意见。 一、总体要求…...

编程日记 2026/3/20 9:58:21

【Elasticsearch】Elasticsearch 中使用 HDFS 存储快照

在 Elasticsearch 中使用 HDFS 存储快照的步骤如下&#xff1a; 1.安装 HDFS 插件 要使用 HDFS 存储 Elasticsearch 的索引快照&#xff0c;需要在 Elasticsearch 集群的所有节点上安装 HDFS 插件。 • 在线安装&#xff1a;适用于网络环境良好的场景&#xff0c;执行以下命…...

编程日记 2026/2/14 20:30:12

Oracle 数据库基础入门（四）：分组与联表查询的深度探索（下）

在 Oracle 数据库的操作中&#xff0c;联合查询与子查询是获取复杂数据的关键手段。当单表数据无法满足业务需求时&#xff0c;联合查询允许我们从多张表中提取关联信息&#xff0c;而子查询则能以嵌套的方式实现更灵活的数据筛选。对于 Java 全栈开发者而言&#xff0c;掌握这…...

编程日记 2026/2/14 12:53:45

深搜专题6：迷宫问题

描述 设有一个N*N方格的迷宫&#xff0c;入口和出口分别在左上角和右上角。 迷宫格子中分别放有0和1&#xff0c;0表示可通&#xff0c;1表示不能&#xff0c;迷宫走的规则如下&#xff1a; 即从某点开始&#xff0c;有八个方向可走&#xff0c;前进方格中数字为0时表示可通过…...

编程日记 2026/3/22 21:56:49

【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置

【每日学点HarmonyOS Next知识】web滚动、事件回调、selectable属性、监听H5内部router、Grid嵌套时高度设置 1、HarmonyOS WebView加载url无法滚动&#xff1f; scroll 里面嵌套webView&#xff0c;demo参考&#xff1a; // xxx.ets import web_webview from ohos.web.webv…...

编程日记 2026/2/14 23:20:57

MacBook上API调⽤⼯具推荐

在当今的软件开发中&#xff0c;API调用工具已经成为了开发者不可或缺的助手。无论是前端、后端还是全栈开发&#xff0c;API的调试、测试和管理都是日常工作中的重要环节。想象一下&#xff0c;如果没有这些工具&#xff0c;开发者可能需要手动编写复杂的CURL命令&#xff0c;…...

编程日记 2026/3/9 3:25:47

如何构建一个 Docker 镜像?

1. 创建 Dockerfile 文件 &#xff08;1&#xff09;选择工作目录 首先&#xff0c;创建一个项目目录&#xff0c;并进入该目录&#xff1a; mkdir my-docker-project cd my-docker-project&#xff08;2&#xff09;创建 Dockerfile 使用任何文本编辑器&#xff08;如 nano、…...

编程日记 2026/2/14 15:35:19

【数据结构】LRUCache|并查集

目录 一、LRUCache 1.概念 2.实现:哈希表双向链表 3.JDK中类似LRUCahe的数据结构LinkedHashMap &#x1f525;4.OJ练习 二、并查集 1. 并查集原理 2.并查集代码实现 3.并查集OJ 一、LRUCache 1.概念 最近最少使用的&#xff0c;一直Cache替换算法 LRU是Least Recent…...

编程日记 2026/3/16 1:45:14

go数组的声明和初始化

1.数组简介 数组是可以存放多个同一类型的数据。数组也是一种数据类型&#xff0c;在go中&#xff0c;数组是值类型。数组的长度也是数组类型的一部分&#xff0c;所以[2]int和[3]int属于不同的数据类型。 2.数组的长度也是类型的一部分 var arr1 [2]intvar arr2 [3]intfmt.P…...

编程日记 2026/2/14 22:15:53

基于STM32的智能家居中控系统

基于STM32的智能家居中控系统 下载源文件 链接:博客 第1章 绪论 1.1 研究背景与意义&#xff08;扩增至1500字&#xff09; • 市场数据支撑&#xff1a;引用IDC报告数据显示&#xff0c;中国智能家居设备市场年增长率达25%&#xff08;2022年市场规模超6500亿元&#xff09; …...

编程日记 2026/2/17 0:21:22

初识Qt · 信号与槽 · 基础知识

目录 前言&#xff1a; 信号和槽初识 两个问题 前言&#xff1a; 本文我们正式开始介绍信号与槽这个概念&#xff0c;在谈及Qt中的信号与槽这个概念之前&#xff0c;我们不妨回顾一下Linux中的信号&#xff0c;比如发生了除0错误&#xff0c;OS就会给该进程发送一个信号&am…...

编程日记 2026/3/12 3:36:37

Java高频面试之集合-03

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;说说ArrayList和LinkedList的区别 ArrayList 与 LinkedList 的详细对比 一、底层数据结构 特性ArrayListLinkedList存…...

编程日记 2026/3/15 15:32:00

常用的分布式ID设计方案

常用的分布式ID设计方案 在分布式系统中&#xff0c;生成全局唯一的ID是一个常见的需求。无论是数据库表中的主键&#xff0c;还是消息队列的消息ID&#xff0c;都需要一个高效且可靠的唯一标识符。本文将探讨几种常用的分布式ID设计方案&#xff0c;并分析它们的优缺点。 1. …...

编程日记 2026/2/4 9:28:54

宇树科技再落一子！天羿科技落地深圳，加速机器人创世纪

2025年3月5日&#xff0c;机器人行业龙头宇树科技&#xff08;Unitree&#xff09;在深圳再添新动作——全资子公司深圳天羿科技有限公司正式成立。这家注册资本10万元、法定代表人周昌慧的新公司&#xff0c;聚焦智能机器人研发与销售&#xff0c;标志着宇树科技在华南市场的战…...

编程日记 2026/3/19 21:28:52

【长安大学】苹果手机/平板自动连接认证CHD-WIFI脚本(快捷指令)

背景&#xff1a; 已经用这个脚本的记得设置Wifi时候&#xff0c;关闭“自动登录” 前几天实在忍受不了CHD-WIFI动不动就断开&#xff0c;一天要重新连接&#xff0c;点登陆好几次。试了下在网上搜有没有CHD-WIFI的自动连接WIFI自动认证脚本&#xff0c;那样我就可以解放双手&…...

编程日记 2026/3/21 12:16:45

基于遗传算法的无人机三维路径规划仿真步骤详解

基于遗传算法的无人机三维路径规划仿真步骤详解 一、问题定义 目标：在三维空间内，寻找从起点到终点的最优路径，需满足： 避障：避开所有障碍物。路径最短：总飞行距离尽可能短。平滑性：转折角度不宜过大，降低机动能耗。输入： 三维地图（含障碍物，如立方体、圆柱体）。起…...

编程日记 2026/2/28 10:27:27

【Elasticsearch】索引生命周期管理相关的操作（Index Lifecycle Actions）

Elasticsearch 的Index Lifecycle Management(ILM)是一种用于管理索引生命周期的工具&#xff0c;它允许用户根据索引的使用阶段&#xff08;如热、温、冷、冻结&#xff09;自动执行一系列操作。以下是详细解释 Elasticsearch 中的索引生命周期操作&#xff08;Index Lifecycl…...

编程日记 2026/2/27 7:56:34

计算机毕业设计SpringBoot+Vue.js电商平台(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2026/3/19 20:59:39

【杂谈】信创电脑华为w515（统信系统）登录锁定及忘记密码处理

华为w515麒麟芯片版&#xff0c;还有非麒麟芯片版本&#xff0c;是一款信创电脑&#xff0c;一般安装的UOS系统。 准备一个空U盘&#xff0c;先下载镜像文件及启动盘制作工具&#xff0c;连接如下&#xff1a; 百度网盘 请输入提取码 http://livecd.uostools.com/img/apps/l…...

编程日记 2026/3/11 10:42:58

初始提示词(Prompting)

理解LLM架构 在自然语言处理领域&#xff0c;LLM&#xff08;Large Memory Language Model&#xff0c;大型记忆语言模型&#xff09;架构代表了最前沿的技术。它结合了存储和检索外部知识的能力以及大规模语言模型的强大实力。 LLM架构由外部记忆模块、注意力机制和语…...

编程日记 2026/3/16 19:50:54

Vue+el-upload配置minIO实现大文件的切片并发上传、上传进度展示、失败重试功能

vue3el-upload实现切片上传 效果图 初始界面 上传中的界面 上传完成的界面 上传失败的界面 <template><div><el-uploadclass"BigFileUpload"ref"uploadRef"action"#"drag:show-file-list"false":on-change"…...

编程日记 2026/3/14 7:18:21

正则表达式梳理（基于python）

正则表达式&#xff08;regular expression&#xff09;是一种针对字符串匹配查找所定义的规则模式&#xff0c;独立于语言&#xff0c;但不同语言在实现上也会存在一些细微差别&#xff0c;下面基于python对常用的相关内容进行梳理。 文章目录 一、通用常识1.通配符ps.反义 2.…...

编程日记 2026/3/15 2:00:45

Scala 中 val 和对象内部状态的关系

在 Scala 中&#xff0c;val 用于声明不可变的变量&#xff0c;这意味着一旦 val 被赋值&#xff0c;它的引用&#xff08;即指向的内存地址&#xff09;就不能再改变。然而&#xff0c;这并不影响对象内部的状态&#xff08;即对象的属性&#xff09;是否可以改变。具体来说&a…...

编程日记 2026/3/19 5:02:36

skynet简单游戏服务器的迭代

在上一篇的基础上做了改进&#xff0c;主要三个更新&#xff1a; 基础框架引入多一层redis缓存&#xff0c;用于持久化数据&#xff0c;加速数据访问。原本需要通过mysql读取的操作&#xff0c;直接改成与redis层交互&#xff0c;redis会自动写入mysql&#xff0c;保证AP 最终…...

编程日记 2026/2/18 6:37:47

Python学习第八天

查看函数参数 操作之前给大家讲一个小技巧&#xff1a;如何查看函数的参数&#xff08;因为python的底层源码是C语言并且不是开放的&#xff0c;也一直困扰着刚学习的我&#xff0c;这个参数叫什么名之类的看doc又总是需要翻译挺麻烦的&#xff09;。 比如我们下面要说到的op…...

编程日记 2026/2/21 16:29:42

美股回测：历史高频分钟数据的分享下载与策略解析20250305

美股回测&#xff1a;历史高频分钟数据的分享下载与策略解析20250305 在金融分析和投资决策的精细化过程中&#xff0c;美股历史分钟高频数据发挥着至关重要的作用。这些数据以其详尽性和精确性&#xff0c;记录了股票每分钟的价格波动和成交量变化&#xff0c;为投资者提供了…...

编程日记 2026/3/2 12:24:40