1. absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的
  2. relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。所以absolute会把非定位盒子覆盖掉。
  3. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..
  4. 这里还有一个文本流的概念。表现在float和relative的区别,relative既脱离文档流也脱离文本流,而float只是脱离了文档流。所以才会表现出,float元素会把非定位盒子覆盖掉,但不会覆盖非定位盒子里面的文本,因为没有脱离文本流,非定位盒子内的文本环绕在float的周围。而对于使用absolute元素,会把非定位和自的位置和开面的文本一起覆盖掉。
  5. 使用场景;

    l  Relative用法,经验案例::

    1. 给absolute元素提供定位基准

    2. 有absolute元素时用其控制层级关系

l  两栏宽度自适应,常用经典做法案例::

position:relative/static/fixed/absolute定位的区别以及使用场景的更多相关文章

  1. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  2. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  3. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. fixed 和 absolute 定位的区别

    fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...

  6. Relative 定位与Absolute 定位实例

    一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...

  7. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  8. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  9. 浅析position:relative position:absolute

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...

随机推荐

  1. git 关于commit命令的修改

    1 修改最后一次提交的信息 git commit --amend 2 对于历史提交 git rebase -i HEAD~5 没毛病,

  2. CF1205B

    CF1205B 由鸽巢原理n比较大的时候直接输出3 然后剩下的就可以跑最小环 #include<iostream> #include<cstdio> #include<c ...

  3. OpenGL中的空间变换

    OpenGL中的空间变换          在使用OpenGL的三维虚拟程序中.当我们指定了模型的顶点之后.在屏幕上显示它们之前,一共会发生3种类型的变换:视图变换.模型变换.投影变换.        ...

  4. CXF异常:No operation was found with the name

    https://blog.csdn.net/qq_18675693/article/details/52134805 不同包下面,别忘了namespace最后要加“/”

  5. batch normlization (BN)的讲解

    1. https://zhuanlan.zhihu.com/p/54073204(简单理解) 2. https://zhuanlan.zhihu.com/p/34879333 (有举例说明,但是不太理 ...

  6. 写MySQL存储过程实现动态执行SQL

    转自:http://www.cnblogs.com/william-lin/archive/2013/03/19/2968727.html--存储过程名和参数,参数中in表示传入参数,out标示传出参 ...

  7. asp.net Mvc 增删改查

    1.创建项目 已经创建好项目了 2.创建数据库 使用这个数据库或者自己创建一个数据库,一个表就好,简单 USE [LearnAdminlte] GO /****** Object: Table [db ...

  8. Boost Doc Home

    { //http://charette.no-ip.com:81/programming/doxygen/boost/group__async__read.html#gafe3e905a43504bd ...

  9. 【Flutter学习】基本组件之图标组件Icon

    一,概述 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件. 图标组件相关的几个组件: IconButton:可交互的Icon: Icon ...

  10. Extjs各版本的下载链接,包含ext3.4源码示例

    最近在维护一个老平台,用的是ext3.4,老东西在网上找示例发现既然还有人收钱,谷歌了一下总算找到了一位免费的发布的,感谢 yipanbo 分享 Extjs的版本繁多,本文收集了Extjs各个版本的下 ...