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

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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩转springboot之SpringBoot打成jar包的结构

SpringBoot打成jar包的结构 springboot通常会打成jar包&#xff0c;然后使用java -jar来进行执行&#xff0c;那么这个jar包里的结构是什么样的呢 其中 BOOT-INF 中包含的classes是我们程序中所有的代码编译后的class文件&#xff0c;lib是程序所引用的外部依赖 META-INF 这个…

AM243-Timer

目录 简介初始化代码测试API补充 简介 定时中断。 初始化 开启定时器&#xff0c;最多支持8个硬件定时器 定时周期1ms 增加一个GPIO输出口PRG0_PRU1_GPO15/M4 &#xff0c;我们会在定时中断中每隔1ms翻转该引脚&#xff0c;理想情况下应该在该引脚上测得2ms周期500Hz的矩形…

手把手教你打数学建模国赛!!!第一天软件准备篇

第一天软件准备 MATLAB MATLAB&#xff08;Matrix Laboratory&#xff09;是一种强大的数值计算和科学编程软件。它提供了丰富的数学函数和工具&#xff0c;用于数据分析、算法开发、信号处理、图像处理、控制系统设计、仿真等应用领域。 MATLAB具有直观的语法&#xff0c;使…

Postman接口模拟请求工具使用技巧

Postman是一款非常强大的接口模拟请求工具&#xff0c;可以帮助开发者快速测试、调试API接口。下面集合实际使用过程中的经验&#xff0c;分享大家一些基础使用技巧&#xff1a; 1. 安装与启动&#xff1a;首先在官网&#xff08;Download Postman | Get Started for Free&…

【Linux信号】阻塞信号、信号在内核中的表示、信号集操作函数、sigprocmask、sigpending

我们先来了解一下关于信号的一些常见概念&#xff1a; 实际执行 信号的处理动作 称为信号递达。 信号从产生到递达的之间的状态称为信号未决。 进程可以选择阻塞(Block)某个信号。 被阻塞的信号产生时是处于未决状态的&#xff0c;知道进程解除对该信号的阻塞&#xff0c;该…

零信任作为解决方案,Hvv还能打进去么?

零信任平台由“中心组件服务”三大部分构成&#xff0c;以平台形式充分融合软件定义边界&#xff08;SDP&#xff09;、身份与访问管理&#xff08;IAM&#xff09;、微隔离 &#xff08;MSG&#xff09;的技术方案优势&#xff0c;通过关键技术的创新&#xff0c;实现最佳可信…

Vue中的Mixins与钩子函数:理解合并与调用

在Vue的开发过程中&#xff0c;mixins是一个非常有用的特性&#xff0c;它允许我们跨多个组件共享可复用的代码。然而&#xff0c;当我们在组件与mixins之间定义同名的钩子函数或方法时&#xff0c;理解它们之间的相互作用和合并机制就显得尤为重要。 在Vue.js中&#xff0c;对…

Reinforement Learning学习记录(五)

前言 最近两周的工作主要是在做方向的探索和相关论文的学习,这次的介绍会分为,项目介绍,论文学习,当前进度,未来计划 项目介绍 最近主要是尝试了两个大类的项目,第一个是视觉追踪,第二个是三维重建 视觉跟踪 视觉追踪的话,参考了这几个开源项目: CoTracker: It i…

手机数据恢复篇:如何从 Android 手机恢复消失的照片

丢失 Android 手机中的照片现在已成为您可能遇到的最糟糕的情况之一。随着手机在相机方面越来越好&#xff0c;即使是那些不热衷于拍照的人也成为了摄影师。 如今&#xff0c;人们可以随时随地拍摄照片&#xff0c;每一张照片都保存着回忆和数据&#xff0c;因此&#xff0c;丢…

变得越来越优秀的方法

反省后看到问题很正常&#xff0c;接纳-行动-改变-能量-帮助-成长变优秀&#xff1b;温和后需要【中庸智慧】灵活处世&#xff0c;不做老好人&#xff0c;须有原则有框架&#xff01; —— 只有深刻地反省&#xff0c;我们才能真正地认识自己&#xff0c;我们反省后会看到自己…

昇思25天学习打卡营第19天|应用实践之基于MobileNetv2的垃圾分类

基本介绍 今天的应用实践是垃圾分类代码开发&#xff0c;整体流程是读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。采用的是MobileNetv2模型&#xff0c;使用官方提供的数据集&#xff0c;数据集分为4大类&…

python如何与前端交互

文章目录 1. 选择一个 Python Web 框架2. 创建 Web 应用程序3. 编写后端逻辑4. 编写前端代码5. 连接前后端6. 部署和测试扩展Jupyter Notebook Python 与前端&#xff08;如 HTML, CSS, JavaScript&#xff09;的关联通常是通过 Web 框架来实现的&#xff0c;这些框架允许 Pyth…

维度的自定义标签:Kylin Cube设计中的元数据支持

维度的自定义标签&#xff1a;Kylin Cube设计中的元数据支持 在数据分析的多维世界中&#xff0c;Apache Kylin的Cube设计提供了强大的灵活性&#xff0c;允许用户根据需求定制化地分析数据。维度的自定义元数据是这一灵活性的体现之一&#xff0c;它允许用户为维度添加额外的…

【MySQL】8.复合查询

复合查询 一.基本查询回顾(新增子查询)二.多表查询三.自连接四.子查询1.单列单行子查询2.单列多行子查询——三个关键字3.多列子查询4.在 from 子句中使用子查询 五.合并查询六.总结 一.基本查询回顾(新增子查询) //1.查询工资高于500或岗位为MANAGER的雇员&#xff0c;同时还…

Python高级(四)_内存管理

Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的,等着你使用 概述:整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…

C语言——循环结构:while、do...while、for

while循环 基本结构 C语言中的while循环是一种基本的循环控制结构&#xff0c;它允许程序重复执行一段代码块&#xff0c;直到指定的条件不再满足为止。while循环的语法结构如下&#xff1a; while (condition) { // 循环体 // 在这里编写要重复执行的代码 } condition …

Avalonia创建导航菜单

1. 简介 已开源&#xff0c;后续还会继续更新学习到的内容&#xff0c;欢迎Star&#xff0c;GitHub地址 开发Avalonia需要的一些资料&#xff0c;我已经分享到另一篇文章 示意图 涉及到内容&#xff1a; MVVM路由模板 开发&#xff1a; 开发工具&#xff1a;Rider&#x…

acnconda虚拟环境管理笔记

虚拟环境 conda create --name photos_com python3.8 conda info --envs activate 环境名 conda install -n 环境名 包名 conda remove --name 环境名 包名 虚拟环境基本操作 下面以例子来说明怎么建立、使用或是删除虚拟环境。比如&#xff1a;想新建一个名为 ‘pytest’ 的虚…

【linux】进程间通信(IPC)——匿名管道,命名管道与System V内核方案的共享内存,以及消息队列和信号量的原理概述

目录 ✈必备知识 进程间通信概述 &#x1f525;概述 &#x1f525;必要性 &#x1f525;原理 管道概述 &#x1f525;管道的本质 &#x1f525;管道的相关特性 &#x1f525;管道的同步与互斥机制 匿名管道 &#x1f525;系统调用接口介绍 &#x1f525;内核原理 …

C++ QT开发 学习笔记(1)

C QT开发 学习笔记(1) 考试系统 创建项目 新建Qt桌面应用程序&#xff0c;项目名&#xff1a;ExamSys。 类信息&#xff1a;类名LoginDialog继承自QDialog &#xff08;1&#xff09; ExamSys.pro 工程文件&#xff0c;包含当前工程的相关信息。 QDialog 是 Qt 框架中用…