大前端relative和absolute详解

很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

大前端relative和absolute详解相关推荐

z-index失效的几种情况，父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...
前端技术之_CSS详解第三天
前端技术之_CSS详解第三天二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
前端技术之_CSS详解第五天
前端技术之_CSS详解第五天一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. <!DO ...
大数据发展规划及技术详解
大数据发展规划及技术详解 1.BI的流程:主要是阐述一下BI的流程:第一,需求分析阶段,要搞清楚用户需求,就本例用户想要的是volte业务使用情况的月报表,必须要搞清楚月报表中包括哪些指标(包括维度指 ...
＜Zhuuu_ZZ＞大数据技术之Flume详解
大数据技术之Flume详解一 Flume配置 Flume安装地址环境配置验证二 Flume基础架构 1.定义 2.Flume组成架构 3.Flume组件 Agent Source Channe ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
大数据平台作业调度系统详解－理论篇
大数据开发平台的核心组件之一:作业调度系统. 作业调度系统是一个相对复杂的系统,涉及的内容繁杂,针对的场景多种多样,实现的方案千差万别,是一个需要理论和实践并重的系统. 本文先从大的场景划分的角度对市 ...
内存虚拟化、内存复用、大页内存作用及详解
内存虚拟化.内存复用.大页内存作用及详解 1. 内存虚拟化 2. 内存复用 2.1. 内存共享 2.2. 内存置换 2.3. 内存气泡 3. 大页内存 3.1. 大页内存原理 3.2. 大页内存配置 ...
4大JVM性能分析工具详解，及内存泄漏分析方案
谈到性能优化分析一般会涉及到: Java代码层面的,典型的循环嵌套等还会涉及到Java JVM:内存泄漏溢出等 MySQL数据库优化:分库分表.慢查询.长事务的优化等阿里P8架构师谈:MySQL慢 ...

大前端relative和absolute详解

大前端relative和absolute详解相关推荐

最新文章

热门文章