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. Python 把u'\xca\xd3\xc6\xb5\xd7\xa5\xc8\xa1' 输出正常中文

    今天碰见从数据库读取出来数据是u'\xca\xd3\xc6\xb5\xd7\xa5\xc8\xa1',输出显示乱码,经常查询处理如下: 两种方式: 1. s = u'\xca\xd3\xc6\xb5\ ...

  2. python langid实现语种识别

    2017-04-26 语料数据入库时有个小需求,需要用一个字段存储语料的语种,偶然发现langid可以实现这一功能,再次感叹python的好用! #coding=utf-8 import langid ...

  3. 转:windows 查找pid并kill进程

    找出占用1099端口的进程,进入windows命令,查看什么进程占用了1099端口 使用命令:netstat -aon|findstr 1099 找出占用1099端口的进程,如下图所示:

  4. Linux Java开发环境

    一.旧版本JDK卸载 1.卸载系统自带JDK版本 #rpm -qa|grep gcj 查看到如下信息,如图所示:   进行卸载默认安装JDK: #rpm -e --nodeps java-1.4.2- ...

  5. hdu5303(2015多校2)--Delicious Apples(贪心+枚举)

    Delicious Apples Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  6. JavaScript对象浅复制

    1.概述 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面 ...

  7. <转>Windows平台下Makefile学习笔记(二)

    本文转自:http://blog.csdn.net/clever101/article/details/8286066 上次我们学习了怎么用Makefile编译一个控制台工程.这次我们学习一下如何使用 ...

  8. 如何进入到Docker容器内部

    启动Docker容器后,对应的服务(例如tomcat启动)也通过dockerfile文件命令运行起来了,这个时候如何进行容器内部观察容器的运行状态. 1.docker attach 这个命令在创建一个 ...

  9. mysql临时表空间暴涨

    (此文刚好遇到转载记录) 一.内部临时表使用 在某些情况下,服务器在处理语句时创建内部临时表,而用户无法直接控制临时表何时发生,完全有MySQL内部自行决定. MySQL在以下几种情况会创建临时表: ...

  10. Windows进程间通信--共享内存映射文件(FileMapping)--VS2012下发送和接收

    之前以为两个互不相关的程序a.exe b.exe通信就只能通过网络,人家说可以通过发消息,我还深以为不然,对此,我表示万分惭愧. 之前课本上说的进程间通信,有共享内存.管道等之类的,但没有自己操刀写过 ...