什么是css绝对定位与相对定位,CSS相对定位与绝对定位

1.相对定位

Position : relative ;

特点：

1 如果没有定位偏移量，对元素本身没有任何影响；

2 不使元素脱离文档流，空间是会被保留；

3 不影响其他元素布局；

4 left、top、right、bottom是相对于当前元素自身进行偏移的。

代码：

初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非显示位置；

运行效果：

2.绝对定位

Position : absolute ;

特点：

1 使元素完全脱离文档流；

2 使内联元素支持宽高 (让内联具备块特性)；

3 使块元素默认宽根据内容决定(让块具备内联的特性)；

4 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)；

注：如果祖先元素中有多个元素具备定位模式，那么是以离自己最近的祖先元素进行偏移。

初始代码：

初始效果：

当有定位祖先元素时，

代码：

对box2添加了绝对定位，对box2的祖先元素box1添加了相对定位，则box2相对于其祖先元素box1进行偏移， left: 10px; top: 10px;

运行效果：

当祖先元素中有多个元素具备定位模式时，

代码：

当祖先元素box1和body都具备定位模式时，box2是以离自己最近的祖先元素box1进行偏移， left: 20px; top: 20px;

运行效果：

当没有定位祖先元素时

代码：

对box2添加的绝对定位，此时没有定位祖先元素，box2相对于整个文档产生偏移

left: 0; top:0; 因此box2处于整个文档的左上角；

运行效果：

3.相对定位与绝对定位的区别

1. relative相对定位是占位的，当有left、right、top、bottom等属性发生使其产生偏移时，实际占位为偏移前的原位置而不是显示位置；

2. absolute绝对定位是不占位的，不会影响其他元素位置。

4.定位和浮动的区别

浮动：解决左右排列的问题

定位：解决叠加排列的问题

逆战班2020

CSS相对定位与绝对定位详解

相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: 值 描述 absolute 使元素绝对定位,相 ...

CSS——相对定位、绝对定位、固定定位

相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...

z-index 可以使用负值，CSS相对定位、绝对定位利器

很多技巧都是在工作中测试出来的,我搞DIV+CSS前端开发,现在是安卓收藏家,日常也有很多技巧,刚刚突然发现的这个技巧,真的很实用:Z-index值可以使用负值. z-index是个很强大的属性,是个 ...

CSS相对定位、绝对定位

CSS定位属性:position. 定位的基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素或浏览器窗口本身的位置. position属性值:static.relativ ...

css相对定位和绝对定位

相对定位,是对原来元素的位置为参照物进行定位: 绝对定位,如果父级没有定位,则针对HTML为参照物进行定位:如果父级有定位,则针对父元素为参照物进行定位

详解div+css相对定位和绝对定位用法

1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...

详解CSS的相对定位和绝对定位

CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

css之position相对定位和绝对定位

一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

CSS中相对定位与绝对定位

看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

随机推荐

统计iOS项目的总代码行数的方法

打开终端, 用cd命令 定位到工程所在的目录,然后调用以下命名即可把每个源代码文件行数及总数统计出来: find . "(" -name "*.m" -or - ...

css3媒体查询实现网站响应式布局

最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局.

GridView不換行

在开发中用到了需要ScrollView嵌套GridView的情况,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全. 解决办法,可以把ScrollVIew给删除 ...

DesignPatternPrinciple(设计模式原则)二

设计模式六大原则(5):迪米特法则 定义:一个对象应该对其他对象保持最少的了解. 问题由来:类与类之间的关系越密切,耦合度越大,当一个类发生改变时,对另一个类的影响也越大. 解决方案:尽量降低类与类之 ...

java 异步线程下的顺序控制

转载请注明出处!!!! java.util.concurrent.CountDownLatch 的使用可以达到效果   CountDownLatch是JAVA提供在java.util.concurre ...

python历史与基本类型

前言 我自学的方式主要是看文档,看视频,第一次做写博客这么神圣的事情,内心是忐忑的,写的东西比较杂,路过的小伙伴不要嘲笑我,主要是记录一日所学,顺便锻炼一下语言组织能力吧,anyway,这些都不重要, ...

【点击项目属性】Target runtime Apache Tomcat v7.0 is not defined

这个项目是去年用同一个eclipse做的,但是今年原封不动导入的时候,确发现这个东西 tomcat选成我们本地的tomcat8就可以了 泼菲解决.

PAT甲1077 Kuchiguse【字符串】【暴力】【Hash】【二分】

1077 Kuchiguse (20 分) The Japanese language is notorious for its sentence ending particles. Personal ...

【pushlet学习】具体实战

业务需求: 1. 前端界面需要实时显示空调.照明等设备的状态, 如:空调电压.空调电流.光照强度等,这些量每一个称作一个测点: 2. 不同的用户登录系统后,用户只能看到自己设备的运行状态,而看不到其他 ...