探究position定位中absolute和relative的异同
相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和relative定位的本质区别。
一、默认定位
HTML结构如下:<h1>和<h2>是为了与窗口的顶部隔开距离便于观察,neighboor和child2的div是为了对比位置,我们真正需要定位的焦点放在了child1的div上。
<h1>Position Attribute</h1>
<h2>Relative & Absolute</h2>
<div class="container"><div class="neighboor"></div><div class="parent"><div class="child1"></div><div class="child2"></div></div>
</div>
CSS如下:
.parent{background-color: yellow;height: 200px;width: 200px;display: inline-block;
}.child1{background-color: green;height: 100px;width: 100px;
}.child2{background-color: royalblue;height: 50px;width: 50px;
}.neighboor{background-color: pink;height: 200px;width: 200px;display: inline-block;
}
我们来看一下默认定位的效果(特意留出地址栏方便观察位置对比)
二、relative定位
首先我们来看一下官方的解释:生成相对定位的元素,相对于其正常位置进行定位。我们来尝试一下在child1中加入relative定位,并且辅以top和left位移值:
.child1{background-color: green;height: 100px;width: 100px;position: relative;top: 20px;left: 20px;
}
效果如下:
我们看到绿色方块代表的child1和原来的位置相比top和left偏移了,但是其他的div都安分守己地待在原处,就好像child1的位移并没有对它们造成任何影响。
所以我们总结relative定位:
1.相对于元素原来的位置进行相应的位移;
2.其他元素的位置并不受影响,也就是说被定位的元素原来的位置还存在占位,并没有释放。
三、absolute定位
首先我们还是来看一下官方的解释:生成绝对定位的元素,相对于默认定位以外的第一个父元素进行定位。我们尝试一下在child1中加入absolute定位:
.child1{background-color: green;height: 100px;width: 100px;position: absolute;top: 20px;left: 20px;
}
我们看到效果如下:
我们观察到,绿色块代表的child1是相对于浏览器视口进行了位移,而且它原来所占的位置被释放掉,被紫色块代表的child2给占领了。这里我们容易得到absolute和relative最重要的一个区别:relative定位不释放原来所占的位置,absolute定位释放原来所占的位置。还有个悬而未决的地方,就是absolute定位到底相对于谁进行位移的,在我们刚刚的试验中,“貌似”是相对于浏览器视口进行偏移的,但是事实真的如此吗?我们来研究一下官方的那句定义“相对于默认定位以外的第一个父元素进行定位”。在我们刚刚的试验中,parent、container、body都是chidl1的父元素,但是parent和container都是默认定位,所以“默认定位以外的第一个父元素”就是body元素了。那现在我们给parent进行relative定位(这里不需要设置LTRB偏移值,只是消除parent的默认定位属性),看到结果如下:
果然如和我们所料,这个时候“默认定位以外的第一个父元素”就是parent了,所以这次child1是相对于黄色块代表的div进行偏移的,而由于它释放了原来所占的位置,紫色块代表的div2就占领了它的位置。
总结一下absolute定位:
- 相对于谁进行定位有点复杂:就是找出定位元素父元素链上的所有父元素,由近到远哪个元素不是默认定位(即static定位)的,那么就相对于它进行定位。
- 定位元素会释放原来所占的位置,其他元素会补充进来,好似float属性让其漂浮起来一样。
- 当父元素链上所有父元素都是默认定位,那么absolute定位就是相对于body元素的,效果和fix定位差不多。
相信通过以上的代码实现探究,大家已经对absolute和relative定位有了更深刻的认识,其实只要把握两点:1.相对于谁定位 2.是否释放原来的位置(比较官方的说法是“文档流位置”)就足以应付大多数情况了,以后应该不会再对它们傻傻分不清了吧:)
探究position定位中absolute和relative的异同相关推荐
- css中position的两种定位(absolute、relative)
[position:absolute] 意思是:绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 如果没有TRBL,以父级的左上角,在没 ...
- web前端position定位层:absolute+relative应用
web前端html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上.和float浮动一样都脱离了默认文档流.但float元素与默认文档流之间会相互产生影响,而定位层元素则完全独立互不干扰. ...
- position属性的absolute和relative的理解
概述: 每个定位的意义:相对定位是"相对于"元素在文档流中初始位置的,而绝对定位是"相对于"最近的已经定位的祖先元素. 主要: (其实对于定位的理解,主要问题是 ...
- htm——position:static、absolute、relative详解
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- No.10 position定位 之 absolute绝对定位
在css中,使用position(定位),它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素.甚至是浏览器窗口本身的位置. 本篇介绍:absolute(绝对定位) 概念 : ...
- position中的absolute与relative的区别
Position(位置)属性值需要注意的地方 position的属性有: Absolute:绝对定位,是相对于最近的且不是static定位的第一个父元素来定位,元素位置通过"right&qu ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- RN position定位及Android兼容处理
前言 在RN开发中仅仅使用flex布局,也满足不了我们日常的需求开发:RN官方也提供了定位布局,flexbox定位和position定位可以同时使用,同时生效: position RN提供了两种布局方 ...
- 【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
最新文章
- c语言可视化_这些算法可视化网站助你轻松学算法
- SpringBoot @Async Example
- 确保***测试计划成功的10个秘诀(语录)
- 浅谈HASH算法与CSDN密码泄漏事件
- python练习之析构函数
- 2021广州黄冈中学高考成绩查询,黄冈中学广州学校2019高考成绩喜报、本科重本上线人数情况...
- rpm mysql java 驱动_Linux下安装MySQL(rpm方式)
- 配置sharepoint站点为Form认证(下)
- win7 添加XP共享打印机
- Python使用pip安装报错ModuleNotFoundError: No module named ‘pkg_resources‘的解决方法
- 【读书笔记】《贫穷的本质》- [印度] Abhijit Banerjee / [法] Esther Duflo
- 6、因子分解机FM介绍
- java long 变date_long类型转换成日期 LongToDate
- 【小程序】QQ小程序的入门与开发
- 用计算机算一算循环小数,循环小数化分数计算器
- 干货 | 日访问过亿,办公IM及开放式平台在携程的实践
- 腾讯产品总监曹菲:产品经理们,五年后,你会失业吗? 【上】
- ELK 系列八、全链路监控
- HEU_KMS_Activator_v11.1.0
- 共有41款PHP SNS社交网络/交友平台开源软件,第1页