absolute:

  元素完全脱离文档流,不占文档流的位置,不使用top、left等属性时,仍然在原文档流位置上(但是不在文档流中,也不占用位置),设置了top、left等之后,向上寻找到第一个非static元素作为父元素进行定位。

  设置为absolute会令元素的display转变为inline-block,宽度不再是默认100%,而是实际占用,可以设置width:100%来改变。absolute元素由于脱离了文档流,在父元素的宽度计算中,不会计入。

relative:

  元素脱离文档流,但是还占用文档流中的位置,根据原位置进行偏移。(top、left等也有效)

float:

  同relative一样脱离文档流,也占用文档流的位置,与relative有所不同的是,它会影响正常文档流中的文字和inline元素,围绕在自身周围。display也会转变为inline-block。

参考:http://www.cnblogs.com/fu277/archive/2012/03/13/2393519.html

[原创]关于absolute、relative和float的一些思考的更多相关文章

  1. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  3. 2016/2/19 position: fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  4. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  5. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  6. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  7. css 定位(fixed > absolute > relative)与层级zIndex 的权限认知

    原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...

  8. 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

    首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...

  9. html中相对(relative),绝对(absolute)位置以及float的学习和使用案例 (转)

    这几天着手于CSS的研究,研究的原因主要是工作需要,最近发现如果做前端仅仅会javascript很难尽善尽美,当然懂样式和html在一定程度上可以让我们更近一步. css较为简单,由于个人擅长编写代码 ...

随机推荐

  1. asp.net显示评论的时候为几天前的格式

    自己做的一个小项目实现的功能,做个记录先~ 效果如图: 代码如下: public static class TimerHelper { public static string GetTimeSpan ...

  2. zabbix自定义监控项一

    1.在agent端配置 1.1 添加自定义监控项 zabbix中监控项叫做item,监控项的取值方法叫做key item: Items是从agnet主机里面获取的所有数据.通常情况下我叫itme为监控 ...

  3. JAVA泛化及为什么需要泛化

    泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数. 比如,有一种类型为List,此时该List可以是任意类型的列表,如Integer,String等等. 如果把List类型改为List ...

  4. Node.js node主文件找不到时报出的Error:Cannot find module异常

    如果执行>Node xx.js时,xx,js找不到的话,报出的错误是Error:Cannot find module 'c:/test/xx,js' 主文件名打错或者是点号打成逗号都会出这样的错 ...

  5. iOS 引入外部字体 otf/ttf/ttc

    1.首先下载到字体的otf文件(Mac电脑下搜索字体册) 2.将字体文件拖到项目工程下 3.plist设置 Fonts provided by application 属性 4.代码中使用[UIFon ...

  6. python可hash 不可hash类型

    不可变类型是可hash #tuple str freezeset 可变类型是不可hash ##list set

  7. php装饰器

    <?php /* * 用一个类来装饰另一个类,动态的给一个对象增加一些额外功能,这些功能一般是在这个对象调用方法前或方法后 * 比如我们要给User类增加一个登陆日志的功能 */ // 抽象构件 ...

  8. Android_编程规范与经常使用技巧

    一.Android编码规范 1.java代码中不出现中文,最多凝视中能够出现中文 2.局部变量命名.静态成员变量命名 仅仅能包括字母,单词首字母出第一个外.都为大写,其它字母都为小写 3.常量命名 仅 ...

  9. .net 取当前代码的行号及类名称

    取方法入口的行号及类名 //System.Diagnostics.StackTrace st = new System.Diagnostics.StackTrace(1, true); //int a ...

  10. SQLserver备份数据库示例

     BACKUP DATABASE [yee]TO  DISK = N'D:\数据库备份\yee2015.9.11.bak'WITH  NAME = N'yee - 备份',  NOFORMAT, NO ...