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

CSS相对定位与绝对定位

news 来源：原创 2025/8/10 10:27:00

在网页设计里，相对定位（Relative Positioning）和绝对定位（Absolute Positioning）是 CSS（层叠样式表）里控制元素位置的关键手段。下面为你详细讲解它们的概念、特点与应用场景。

相对定位

概念

相对定位是指元素相对于其正常位置进行定位。也就是说，元素首先会按照标准文档流进行布局，占据相应的空间，之后再依据 top、right、bottom 和 left 属性对其位置进行微调。

特点

保留文档流位置：元素进行相对定位时，会在文档流里保留其原本的位置，不会对其他元素的布局产生影响。
偏移参考：top、right、bottom 和 left 属性的值是相对于元素的正常位置而言的。例如，设置 top: 10px 会使元素相对于其正常位置向下移动 10 像素。
图片原本占据的空间依然保留。
应用场景
微调元素位置：当需要对元素的位置进行小幅度调整时，相对定位是个不错的选择。
创建元素的位移效果：可以结合 CSS 动画，使元素在相对位置上产生位移动画。

绝对定位

概念

绝对定位是指元素相对于最近的已定位祖先元素（即 position 属性值不为 static 的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是 <html> 元素）进行定位。

特点

综上所述，相对定位适用于对元素位置进行微调，而绝对定位则适用于创建脱离文档流的布局和特殊的定位效果。在实际应用中，需要根据具体需求选择合适的定位方式。

脱离文档流：元素进行绝对定位后，会脱离标准文档流，不再占据原本的空间，可能会覆盖其他元素。

偏移参考：top、right、bottom 和 left 属性的值是相对于最近的已定位祖先元素的边界而言的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}img{width: 400px;}/* 1.脱标不占位2.参照物：先找最近定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区3.显示模式特点改变：宽高生效（具备行内快的特点）*/.news{position: relative;margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}.news span{top: 0;right: 0;position: absolute;display: block;width: 92px;height: 32px;background-color: rgba(0, 0, 0, 0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./images/news.jpg" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html>

应用场景

创建弹出框和菜单：可以将弹出框或菜单元素绝对定位到触发元素附近。
实现元素的重叠效果：通过绝对定位，使元素重叠显示，创建特殊的视觉效果。

CSS相对定位与绝对定位

在网页设计里，相对定位（Relative Positioning）和绝对定位（Absolute Positioning）是 CSS（层叠样式表）里控制元素位置的关键手段。下面为你详细讲解它们的概念、特点与应用场景。相对定位概念…...

编程日记 2025/8/10 10:27:00

正则表达式（Regular Expression）详解

正则表达式（简称"regex"或"regexp"）是一种强大的文本模式匹配工具，它使用特定语法来描述、匹配和操作字符串。基本概念正则表达式是由普通字符（如字母a到z）和特殊字符（称为"元…...

编程日记 2025/8/10 9:21:26

OpenCV-Python (官方)中文教程(部分一)_Day22

22.3 2D直方图在前面的部分我们介绍了如何绘制一维直方图,之所以称为一维,是因为我们只考虑了图像的一个特征：灰度值。但是在 2D 直方图中我们就要考虑两个图像特征。对于彩色图像的直方图通常情况下我们需要考虑每个的颜色（Hue）和饱和度&…...

编程日记 2025/8/10 10:26:00

【软考-高级】【信息系统项目管理师】【论文基础】采购管理过程输入输出及工具技术的使用方法

采购管理概念项目采购管理包括从项目团队外部采购或获取所需产品、服务或成果的各个过程。项目采购管理包括编制和管理协议所需的管理和控制过程，例如合同、订购单、协议备忘录（MOA）和服务水平协议（SLA）。采购管理…...

编程日记 2025/8/5 9:31:59

基于STM32、HAL库的CP2102-GMR USB转UART收发器驱动程序设计

一、简介： CP2102-GMR是Silicon Labs公司生产的一款USB转UART桥接芯片，主要特点包括：集成USB 2.0全速功能控制器内置USB收发器，无需外部电阻工作电压：3.0V至3.6V 支持的数据格式：数据位8，停止位1，无校验最高支持1Mbps的波特率内置512字节接收缓冲区和512字节发送…...

编程日记 2025/8/5 9:31:57

信息系统项目管理工程师备考计算类真题讲解十四

一、最小生成树问题此问题采用破圈法来解决， 1）以1节点为例，找到路径最小点：1--5：距离为3 2）找1--5最短的节点，选择4：1--5--4：距离为：5 3）找…...

编程日记 2025/8/10 10:26:00

二叉树的基本操作

二叉树的基本操作（C 语言版） 1 二叉树的定义二叉树的图长这样：二叉树是每个结点最多有两个子树的树结构，常被用于实现二叉查找树和二叉堆。二叉树是链式存储结构，用的是二叉链，本质上是链表。二叉树通常以结构体的形式定义，如下，结构体内容包括三部分：本节点所存储…...

编程日记 2025/8/5 9:31:53

网络基础入门第6-7集（抓包技术）

前言： 来自小迪安全v2023 内容： 第六集： 大致内容：burpsuit、茶杯、fiddler的抓包流程 1、安装抓包软件的相关证书 2、各大抓包软件的测试注意用burp抓模拟器的数据包，需要将ip地址设置为本地的ip地址&#xff…...

编程日记 2025/8/5 9:31:51

自定义Widget开发：自定义布局实现

自定义Widget开发：自定义布局实现一、Flutter布局系统基础 1. 布局约束（Constraints） 在Flutter中，布局系统基于约束（Constraints）的概念。每个widget都会接收来自其父widget的约束，并根据这…...

编程日记 2025/8/6 6:24:36

MyBatis(进阶）（xml标签）

本节⽬标 1. 学习MyBatis的动态SQL查询 2. 掌握MyBatis在项⽬中的应⽤, 可以使⽤Spring MVC完成⼀些基础的功能 1. 动态SQL（XML） 动态 SQL 是Mybatis的强⼤特性之⼀，能够完成不同条件下不同的 sql 拼接可以参考官⽅⽂档： M…...

编程日记 2025/8/4 11:38:19

英皇娱乐X乐华娱乐携手造星！“英皇乐华青少年艺人培训班”正式启动！

2025年5月8日，英皇娱乐集团与乐华娱乐集团联合宣布，双方将在北京市燕京实验中学合作开设“英皇乐华青少年艺人培训班”，为8至18岁的青少年提供专业的演艺及才艺学习平台。此次合作旨在集合两大娱乐公司在演艺行业的资源与优势，共同…...

编程日记 2025/8/4 11:38:17

Linux云计算训练营笔记day04（Rocky Linux中的命令）

mv 移动(剪切) 源数据会消失格式: mv 源文件目标路径 touch /opt/a.txt 创建文件 mv /opt/a.txt /root 移动文件，没有改名 mkdir gongli 创建目录 mv gongli /opt/ 移动目录，没有改名 mv /opt/gongli tedu 移动目录，改名了 …...

编程日记 2025/8/8 0:38:34

登录—专业IT笔试面试备考平台_牛客网代码区： #include<algorithm> #include<iostream> #include<vector> #include<unordered_set> using namespace std;struct INTER{int left,right; }; bool compare(const INTER&a,const INTER&a…...

编程日记 2025/8/10 0:44:54

Linux网络编程day7 线程池and UDP

线程池 typedef struct{void*(*function)(void*); //函数指针，回调函数void*arg; //上面函数的参数 }threadpool_task_t; //各子线程任务的结构体/*描述线程池相关信息*/struct threadpool_t{pthread_mutex_t lock; …...

编程日记 2025/8/6 12:46:48

WHAT - ahooks vs swr 请求

文章目录 ahooks特点常用 Hooks 示例1. useRequest — 封装网络请求逻辑（比 SWR / React Query 更轻量）2. useDebounce — 防抖值3. useLocalStorageState — 本地存储的状态4. useBoolean — 快速管理布尔状态5. useEventListener — 添加事件监听 ahoo…...

编程日记 2025/8/4 11:38:09

算法训练营第十一天|150. 逆波兰表达式求值、239. 滑动窗口最大值、347.前 K 个高频元素

150. 逆波兰表达式求值题目思路与解法第一思路： 比较简单 class Solution:def evalRPN(self, tokens: List[str]) -> int:stack []for item in tokens:if item ! and item ! - and item ! * and item ! / :stack.append(item)else:b int(stack.pop())a …...

编程日记 2025/8/8 6:28:30

可视化图解算法35：在二叉树中找到两个节点的最近公共祖先（二叉树的最近公共祖先）

1. 题目描述给定一棵二叉树(保证非空)以及这棵树上的两个节点对应的val值 o1 和 o2，请找到 o1 和 o2 的最近公共祖先节点。数据范围：树上节点数满足 1≤n≤105 , 节点值val满足区间 [0,n) 要求：时间复杂度 O(n) 注：本题保…...

编程日记 2025/8/6 22:29:41

如果说开启的TIM3定时器有ccr1,ccr2,ccr3,我想要关闭ccr2的PWM输出，怎么通过代码实现

目录作用概述： 具体原理： 代码的操作细节： 实际效果： 示意全文： 小结： TIM3->CCER & ~TIM_CCER_CC2E; 作用概述： 作用是禁用 TIM3 的通道 2（CCR2）的捕获…...

编程日记 2025/8/4 11:38:02

高能数造全固态电池干法电极高品质原纤化技术：驱动干法和全固态电池制造新进程

技术背景传统湿法电极制备工艺的局限:传统的湿法电极制备工艺需要使用大量的溶剂来溶解粘结剂和分散活性物质，后续还需要复杂的干燥工序来去除溶剂。这不仅增加了生产成本和能源消耗，溶剂的使用和处理还会带来环境污染和安全隐患。新能源产业发展的需…...

编程日记 2025/8/4 11:38:01

AI驱动的制造工艺：系统化探索与创新

DeepSeek 技术全景在当今 AI 技术蓬勃发展的时代，DeepSeek 已成为该领域中一颗耀眼的明星。自 2023 年 7 月 17 日成立以来，这家由知名私募巨头幻方量化孕育而生的公司，迅速在 AI 领域崭露头角。DeepSeek 的目标是开发顶尖的大语言模型（LLM），并利用数据蒸馏技术打造更精…...

编程日记 2025/8/8 6:41:45

Mac 平台获取地区标识符号

以下是添加了详细中文注释的代码版本，解释每一行代码的作用： #include <CoreFoundation/CoreFoundation.h> #include <vector> #include <string> #include <iostream>// 将 Core Foundation 的字符串(CFStringRef)转换为标准 …...

编程日记 2025/8/4 11:37:55

PyTorch 实战：从 0 开始搭建 Transformer

导入必要的库 python import math import torch import torch.nn as nn from LabmL_helpers.module import Module from labml_n.utils import clone_module_List from typing import Optional, List from torch.utils.data import DataLoader, TensorDataset from torch imp…...

编程日记 2025/8/4 11:37:53

Java 显式锁与 Condition 的使用详解

Java 显式锁与 Condition 的使用详解在多线程编程中，线程间的协作与同步是核心问题。Java 提供了多种机制来实现线程同步，除了传统的 synchronized 关键字外，ReentrantLock 和 Condition 是更灵活且功能强大的替代方案。本文将详细介绍显式…...

编程日记 2025/8/4 11:37:51

【MySQL】存储引擎 - CSV详解

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/4 11:37:49

LeetCode算法题(Go语言实现)_62

题目有两种形状的瓷砖：一种是 2 x 1 的多米诺形，另一种是形如 “L” 的托米诺形。两种形状都可以旋转。给定整数 n ，返回可以平铺 2 x n 的面板的方法的数量。返回对 109 7 取模的值。平铺指的是每个正方形都必须有瓷砖覆盖。两个平铺不…...

编程日记 2025/8/4 11:37:47

矿井设备通信破局：ModbusTCP转DeviceNet网关应用实践

矿井设备通信破局：ModbusTCP转DeviceNet网关应用实践在500米深的金属矿井中，传统人工操控采掘设备存在高风险、低效率问题。某矿业集团引入海希无线遥控器远程控制掘进机，却因通信协议冲突陷入困局：海希遥控器采用DeviceNet协议…...

编程日记 2025/8/4 11:37:45

GrassRoot备份项目

Windows服务项目 Grass.cs using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http.Headers; using System.Net.Http; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Time…...

编程日记 2025/8/5 21:42:01

多级路由器如何避免IP冲突

在多级路由器架构中，避免IP冲突的核心在于合理规划子网、正确配置路由器角色与功能。以下是综合多个搜索结果的解决方案及操作步骤： 一、划分不同子网段修改LAN口IP地址主路由器默认LAN口IP为192.168.1.1，次级路由器需更改为不同网段&#…...

编程日记 2025/8/10 1:47:50

VGGNet详解

VGGNet 由牛津大学视觉几何组（Visual Geometry Group）在2014年提出，凭借极简的 33卷积核堆叠设计成为经典模型，影响了后续大量网络架构。 1. 网络结构 VGGNet 的核心思想是通过多层小卷积核（33）替代大卷…...

编程日记 2025/8/5 22:42:24

TDengine 在新能源行业应用

简介在当前可再生能源迅速发展的浪潮中，分布式光伏和可再生能源的装机容量已经达到相当可观的规模。尽管新能源的发展得到政策的鼎力扶持，但其并网后对电网的运行调度、供电可靠性以及系统的安全稳定带来诸多新挑战。分布式光伏，即分布式…...

编程日记 2025/8/4 11:37:38

[人机交互]设计，原型建立和构造

一.建立和构造原型 1.1理解用户需要和技术之间的关系用户需要和技术之间是一个鸡和蛋的问题 • 用户对产品的理解建立在与该产品交互的基础上 • 用户只有在熟悉后，才能评价是否需要，及进一步的需要 • 构造最终产品需要大量资源 • 原型化是 …...

编程日记 2025/8/5 9:31:49

C#生成二维码和条形码

C# 实现二维码和条形码生成：从入门到实战文章目录 C# 实现二维码和条形码生成：从入门到实战一、引言二、准备工作2.1 开发环境搭建2.2 引入相关库三、生成条形码3.1 条形码基本概念3.2 使用[ZXing.Net](https://ZXing.Net)生成条形码3.2.1 核心代码实现…...

编程日记 2025/8/5 9:31:47

2025.5.8总结（中期审视）

今日记录： 晚上，主管找我聊了关于中期绩效审视的问题。首先就是让我汇报上半年的工作进展，汇报完后，感觉体现不出自己的工作量，这确实考验个人的汇报能力。汇报完工作后，主管开始给我提了一些建设性的…...

编程日记 2025/8/5 9:31:45

Pyinstaller编译EXE及反编译

文章目录适用范围示例文件编译EXE反编译EXE准备工具编译pycdc反编译反编译得到的文件相关资源下载适用范围实测 python3.9可以反编译。从pycdc源代码看，似乎支持到python 3.13。示例文件 demo.py import sys from PyQt5 import QtWidgets, QtCore, QtGui c…...

编程日记 2025/8/9 11:23:02

3.2.3 掌握RDD转换算子 - 3. 扁平映射算子 - flatMap()

在本节课中，我们深入学习了Spark RDD的flatMap()算子。flatMap()与map()类似，但每个元素可以返回0到多个元素，最终将所有结果合并为一个RDD。通过案例演示，我们首先对单词文件进行了统计，通过map()将每行文本转换为单词…...

编程日记 2025/8/6 21:01:18

深入解析 C# 常用数据结构：特点、区别与优缺点分析

在软件开发中，选择合适的数据结构是提高代码效率和性能的关键。在 C# 中，我们常用的数据结构包括 List、Array、Dictionary<TKey, TValue>、HashSet、Queue、Stack 和 LinkedList。每种数据结构有不同的特点、优缺点和适用场景。本文将结合代码&am…...

编程日记 2025/8/5 9:31:39

LeetCode第284题 - 窥视迭代器

题目解答一 package leetcode.editor.cn; //leetcode submit region begin(Prohibit modification and deletion) // Java Iterator interface reference: // https://docs.oracle.com/javase/8/docs/api/java/util/Iterator.htmlimport java.util.Iterator; import java.ut…...

编程日记 2025/8/5 9:31:37

相对定位

概念

特点

应用场景

绝对定位

概念

特点

应用场景

相关文章：