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相对定位与绝对定位的更多相关文章

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

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

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

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

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

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

  4. CSS相对定位、绝对定位

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

  5. css相对定位和绝对定位

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

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

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

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

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

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

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

  9. CSS中相对定位与绝对定位

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

随机推荐

  1. Linux服务器上python2升为python3.6

    如何在在Linux服务器上吧Python2升级为Python3 最近白嫖了一年的服务器,打算在服务器上跑一个Python项目,没想到居然预装的是Python2.7.5.本来是打算把Python2.7. ...

  2. CCF_201409-1_相邻数对

    水. #include<iostream> #include<cstdio> #include<algorithm> using namespace std; in ...

  3. Kafka系列2:深入理解Kafka消费者

    Kafka系列2:深入理解Kafka消费者 上篇聊了Kafka概况,包含了Kafka的基本概念.设计原理,以及设计核心.本篇单独聊聊Kafka的消费者,包括如下内容: 生产者是如何生产消息 如何创建生 ...

  4. Go语言实现:常见排序算法

    冒泡排序: 时间复杂度:O(n^2) 稳定性:稳定 //冒泡排序 //相邻两位交换,12交换,23交换,34交换,把最大的数放到最右边 //利用flag标记可以避免无效循环 func BubbleSo ...

  5. Trie(字典树)的侃侃

    Trie是什么 ? 字典树 : 见名知意(在树上进行查询). 跟字典相关的必定与查询有密切的关系, 查询就需要一定的媒介作为支撑,树就为这种查询提供支撑. Trie做什么 ? 实现字符串快速检索的多叉 ...

  6. .NET Core之单元测试(二):使用内存数据库处理单元测试中的数据库依赖

    目录 定义一个待测试API 测试用例 为减少篇幅,隐藏了SampleEntity和SqliteDbContext 定义一个待测试API 如下,我们定义了一个名为Sample的API,其中有一个外部依赖 ...

  7. 剖析Java OutOfMemoryError异常

    剖析Java OutOfMemoryError异常 在JVM中,除了程序计数器外,虚拟机内存中的其他几个运行时区域都有发生OutOfMemoryError异常的可能,本篇就来深入剖析一下各个区域出现O ...

  8. centos7配置Logstash同步Mysql数据到Elasticsearch

    Logstash 是开源的服务器端数据处理管道,能够同时从多个来源采集数据,转换数据,然后将数据发送到您最喜欢的“存储库”中.个人认为这款插件是比较稳定,容易配置的使用Logstash之前,我们得明确 ...

  9. Spring有哪些配置方式

    1.XML 配置文件. Bean 所需的依赖项和服务在 XML 格式的配置文件中指定.这些配置文件通常包含许多 bean 定义和特定于应用程序的配置选项.它们通常以 bean 标签开头.例如: < ...

  10. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...