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

CSS相对定位和绝对定位的区别

news 2026/3/27 21:12:42

CSS相对定位和绝对定位的区别

区别1：相对的对象不同
  • 相对定位是相对于自己
  • 绝对定位是相对于离自己最近的有定位的祖先
区别2:是否会脱离文档流
  • 相对定位不会脱离文档流，不会影响其他元素的位置
  • 绝对定位会脱离文档流，会影响其他元素的布局
代码演示

这是没有任何定位的代码

<!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>*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}</style>
</head>
<body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

运行结果：
在这里插入图片描述给绿色容器加上相对定位

<!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>*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{position: relative;left: 50px;width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}</style>
</head>
<body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

给绿色容器加入相对定位：

<!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>*{margin: 0;padding: 0;}.main{position: relative;width: 300px;height: 400px;margin: auto;margin-top: 30px;background-color: palegoldenrod;}.box1{position: absolute;left: 50px;width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palegreen;}.box2{width: 200px;height: 100px;margin: auto;margin-top: 10px;background-color: palevioletred;}</style>
</head>
<body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

相关文章：

CSS相对定位和绝对定位的区别

CSS相对定位和绝对定位的区别 区别1&#xff1a;相对的对象不同 相对定位是相对于自己绝对定位是相对于离自己最近的有定位的祖先 区别2:是否会脱离文档流 相对定位不会脱离文档流&#xff0c;不会影响其他元素的位置绝对定位会脱离文档流&#xff0c;会影响其他元素的布局 代…...

编程日记 2024/7/10 15:26:51

SpringCloud之nacos共享配置文件实现多数据源灵活切换

目录 前言 1.引入Springboot相关的aop切面依赖 2.创建自定义注解DataSourceKey 3.创建对ThreadLocal类 4.创建aop切面 5.创建动态数据源类 6.创建多数据库连接配置类 7.关键代码讲解 8.nacos主要配置 前言 通过Spring AOP&#xff08;面向切面编程&#xff09;的功能来动…...

编程日记 2024/7/10 15:25:50

原生小程序生成二维码方法之一

效果图&#xff1a; 第一步&#xff1a;下载对应的包并构建&#xff08;工具---》构建npm&#xff09; npm install weapp-qrcode --save 第二步&#xff1a;在wxml页面声明canvas <canvas style"width: 200px; height: 200px;margin:0 auto;" canvas-id"myQ…...

编程日记 2024/7/10 15:23:48

Kubernetes k8s Pod容器 探针 健康探测

目录 Pod容器健康探测 为什么要对容器做探测&#xff1f; 启动探测startupprobe 存活性探测livenessProbe 就绪性探测readinessProbe ReadinessProbe LivenessProbe startupProbe配合使用示例一般程序中需要设置三种探针结合使用&#xff0c;并且也要结合实际情况&#xff…...

编程日记 2024/7/10 15:20:44

Conformal low power-2.电源感知等效性检查

电源感知等效性检查 ■ 第24页&#xff1a;电源感知等效性检查概述 ■ 第24页&#xff1a;启动低功耗&#xff08;等效性检查&#xff09;软件 ■ 第25页&#xff1a;电源感知等效性检查流程 ■ 第28页&#xff1a;电源感知等效性检查示例Do文件 电源感知等效性检查概述…...

编程日记 2024/7/10 15:19:43

【密码学】从有限状态自动机到密钥流生成器

本文是对流密码内容的拓展&#xff0c;在流密码中种子密钥通过一个伪随机数生成器产生一个与明文等长的伪随机密钥流。而本文的内容就是在回答这样两个问题&#xff1a; 伪随机密钥流是如何生成的&#xff1f;流密码、流密钥生成器和有限状态自动机之间是什么关系&#xff1f;…...

编程日记 2024/7/10 15:18:41

3.相机标定原理及代码实现（opencv）

1.相机标定原理 相机参数的确定过程就叫做相机标定。 1.1 四大坐标系及关系 &#xff08;1&#xff09;像素坐标系&#xff08;单位&#xff1a;像素&#xff08;pixel&#xff09;&#xff09; 像素坐标系是指相机拍到的图片的坐标系&#xff0c;以图片的左上角为坐标原点&a…...

编程日记 2024/7/10 15:17:39

Centos7 安装Docker步骤及报错信息（不敢说最全，但是很全）

一、操作系统要求&#xff1a; 要安装Docker Engine&#xff0c;您需要CentOS 7及以上的维护版本。存档版本不受支持或测试。必须启用centos临时存储库。默认情况下&#xff0c;此存储库已启用&#xff0c;但如果已禁用&#xff0c;则需要重新启用它。建议使用overlay2存储驱动…...

编程日记 2024/7/10 15:13:34

【C语言】符号优先级详解

C语言符号优先级详细解析 在C语言中&#xff0c;不同的运算符具有不同的优先级和结合性&#xff0c;这决定了在表达式中运算符的计算顺序。理解这些优先级和结合性是正确编写和理解C语言程序的基础。本文将详细解析C语言中的符号优先级&#xff0c;包括各类运算符的优先级、结…...

编程日记 2024/7/10 15:10:30

天翼云高级运维工程师202407回忆题库 最新出炉

备考天翼云高级运维工程师 必须备考天翼云 之前觉得外企牛批 然后民企&#xff0c;拔地而起&#xff0c;民企也不错&#xff0c;工资高&#xff0c;有钱途 现在看来看去&#xff0c;还是国企好&#xff0c;体制内的&#xff0c;有保障&#xff0c;树大根深 有必要备考下天…...

编程日记 2024/7/10 15:09:29

在Python中什么是上下文管理器以及如何使用with语句来管理资源

什么是上下文管理器&#xff1f; 在Python中&#xff0c;上下文管理器&#xff08;Context Manager&#xff09;是一种支持with语句的协议&#xff0c;允许对象管理资源&#xff0c;如文件、线程锁的获取和释放、数据库连接等。上下文管理器负责资源的分配和释放&#xff0c;确…...

编程日记 2024/7/10 15:08:28

(四)、python程序--贪吃蛇游戏

一、绪论 贪吃蛇游戏。 已实现功能&#xff1a; 1、上下左右移动&#xff1b; 2、吃食物&#xff0c;随机生成食物&#xff1b; 3、碰撞检测&#xff0c;判断是否游戏结束。 二、代码分享 1、main.py import pygame import sys import food as c_food import snake as c…...

编程日记 2024/7/10 15:06:25

什么是DNS欺骗

DNS欺骗&#xff08;DNS Spoofing&#xff09;&#xff0c;也称为DNS缓存中毒&#xff08;DNS Cache Poisoning&#xff09;&#xff0c;是一种网络攻击形式&#xff0c;攻击者通过操纵DNS记录&#xff0c;将用户重定向到一个伪造的、恶意的网站。这些恶意网站可能看起来与用户…...

编程日记 2024/7/10 15:04:23

C++实现对结构体信息排序

思路解读&#xff1a; 定义结构体 Student: 结构体 Student 用来表示学生信息&#xff0c;包含两个成员变量&#xff1a;name&#xff08;学生姓名&#xff09;和 score&#xff08;学生分数&#xff09;。Student 结构体定义了一个构造函数&#xff0c;用于初始化 name 和 sco…...

编程日记 2024/7/10 15:03:20

[CTF]-PWN：House of Cat堆题型综合解析

原理&#xff1a; 调用顺序&#xff1a; exit->_IO_wfile_jumps->_IO_wfile_seekoff->_IO_switch_to_wget_mode _IO_wfile_seekoff源码&#xff1a; off64_t _IO_wfile_seekoff (FILE *fp, off64_t offset, int dir, int mode) {off64_t result;off64_t delta, new…...

编程日记 2024/7/10 15:02:18

18.按键消抖模块设计（使用状态机，独热码编码）

&#xff08;1&#xff09;设计意义&#xff1a;按键消抖主要针对的时机械弹性开关&#xff0c;当机械触点断开、闭合时&#xff0c;由于机械触点的弹性作用&#xff0c;一个按键开关在闭合时不会马上稳定地接通&#xff0c;在断开时也不会一下子就断开。因而在闭合以及断开的瞬…...

编程日记 2024/7/10 15:01:17

【Hec-HMS】第一期：模型简介及软件安装

HEC-HMS模型简介及软件安装 HEC-HMS模型简介建模思路 HEC-HMS软件安装步骤1&#xff1a;安装InstallShield Wizard步骤2&#xff1a;安装HEC-HMS 参考 HEC-HMS模型简介 HEC-HMS(The Hydrologic Engineering Center’s-Hydrologic Modelimng System)&#xff0c;美国陆军工程兵…...

编程日记 2024/7/10 14:59:15

逻辑回归不是回归吗？那为什么叫回归？

RNN 逻辑回归不是回归吗&#xff1f;那为什么叫回归&#xff1f;逻辑回归的基本原理逻辑函数&#xff08;Sigmoid函数&#xff09;二元分类 为什么叫做“回归”&#xff1f;逻辑回归的应用场景总结 逻辑回归不是回归吗&#xff1f;那为什么叫回归&#xff1f; 逻辑回归&#x…...

编程日记 2024/7/10 14:58:14

Activity对象的部分常见成员变量

在Android开发中&#xff0c;Activity 类是一个非常重要的类&#xff0c;它代表了应用程序中的一个屏幕。每个Activity都有一系列的成员变量和方法&#xff0c;这些成员变量通常用于控制和管理活动生命周期、UI界面元素、应用资源等。虽然具体的成员变量会根据Android的不同版本…...

编程日记 2024/7/10 14:57:12

量化交易策略：赌徒在股市会运用凯利公式（附python代码）

一、凯利公式的历史 凯利公式（Kelly Criterion）是由美国贝尔实验室物理学家约翰拉里凯利（John Larry Kelly）于1956年提出的，用于计算最优投资比例的一种数学公式。凯利公式的核心思想是：在期望收益和风险之间找到一个平衡点，使得投资者在承担一定风险的情况下，能够获得…...

编程日记 2024/7/10 14:56:11

AIGlasses_for_navigation免配置环境：预置ffmpeg+opencv+torchvision全栈

AIGlasses_for_navigation免配置环境&#xff1a;预置ffmpegopencvtorchvision全栈 1. 引言&#xff1a;让AI视觉开发变得简单 如果你曾经尝试过搭建一个完整的AI视觉处理环境&#xff0c;一定知道那是个多么痛苦的过程&#xff1a;安装CUDA、配置ffmpeg、编译OpenCV、处理各…...

编程新知 2026/3/27 19:49:03

系统焕新：Win11Debloat工具让Windows性能提升51%的全方位优化方案

系统焕新&#xff1a;Win11Debloat工具让Windows性能提升51%的全方位优化方案 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更…...

编程新知 2026/3/27 19:34:54

深入解析：高级 Android 开发工程师职位与面试全攻略

引言：移动互联网时代的核心力量 在当今移动互联网蓬勃发展的时代，智能手机已成为人们日常生活中不可或缺的一部分。作为连接用户与数字服务的桥梁，移动应用扮演着至关重要的角色。而在移动应用的生态中，Android 系统凭借其开放性和庞大的用户基础，占据了全球移动操作系统…...

编程新知 2026/3/27 19:24:53

你还在用QGIS导出再读Python？实时对接Google Earth Engine的Python SDK深度调优（延迟＜800ms，吞吐量提升17倍）

第一章&#xff1a;Python 遥感数据分析遥感数据具有多源、多时相、高维度和大体积的特点&#xff0c;Python 凭借其丰富的科学计算生态&#xff08;如 NumPy、SciPy、GDAL/OGR、rasterio、xarray 和 scikit-learn&#xff09;已成为遥感信息提取与分析的主流工具。本章聚焦于使…...

编程新知 2026/3/27 19:16:51

[路径保护]解决中文路径乱码：从名称错乱到Unicode支持的实践指南

[路径保护]解决中文路径乱码&#xff1a;从名称错乱到Unicode支持的实践指南 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项…...

编程新知 2026/3/27 18:56:48

汽车电子工程师必看：如何用MPC5643L实现ASIL-D级别的功能安全设计（附完整代码示例）

汽车电子工程师必看&#xff1a;如何用MPC5643L实现ASIL-D级别的功能安全设计&#xff08;附完整代码示例&#xff09; 在智能驾驶技术快速发展的今天&#xff0c;功能安全已成为汽车电子系统设计的核心考量。作为汽车电子工程师&#xff0c;我们面临的挑战不仅在于实现复杂功…...

编程新知 2026/3/27 18:38:37

终极指南：如何在macOS上打造智能桌面歌词显示体验

终极指南&#xff1a;如何在macOS上打造智能桌面歌词显示体验 【免费下载链接】Lyrics Swift-based iTunes plug-in to display lyrics on the desktop. 项目地址: https://gitcode.com/gh_mirrors/lyr/Lyrics LyricsX是一款专为macOS用户设计的桌面歌词显示工具&#x…...

编程新知 2026/3/27 18:22:15

OpenClaw+GLM-4.7-Flash：个人网络安全监控助手

OpenClawGLM-4.7-Flash&#xff1a;个人网络安全监控助手 1. 为什么需要个人网络安全监控 去年我的开发机遭遇了一次恶意脚本攻击&#xff0c;导致本地Git仓库被篡改。事后排查发现&#xff0c;攻击者通过一个陈旧的SSH密钥漏洞入侵&#xff0c;而系统日志里其实早有异常登录…...

编程新知 2026/3/27 15:53:13

BepInEx游戏插件加载器完全指南：从入门到精通Unity游戏扩展工具

BepInEx游戏插件加载器完全指南&#xff1a;从入门到精通Unity游戏扩展工具 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 如何用BepInEx解锁游戏自定义功能&#xff1f;解决玩家…...

编程新知 2026/3/27 15:47:09

既然有 HTTP 协议，为什么还要有 RPC？

HTTP 和 RPC 都能解决网络通信问题&#xff0c;但它们的设计初衷和适用场景截然不同。简单来说&#xff0c;HTTP 是为了通用性和跨平台设计的&#xff08;像万能的集装箱&#xff09;&#xff0c;而 RPC 是为了极致的性能和开发效率设计的&#xff08;像工厂内部的高速流水线&a…...

编程新知 2026/3/27 15:00:49