position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left、top、right、bottom和z-index属性。(默认这些属性未激活,设置了也无效)

  设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流。

  不同:

  position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index层的位置。

  position:absolute会完全脱离文档流,不再z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全都没有设置,那么就相对于body元素。

  float也能改变文档流,不同的是,float不会让元素浮到另一个元素上面,它仍然让元素在z-index:0层排列,只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列,影响周围元素。

  position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute和float中任何一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算显示的设置display:inline或者display:block,也仍然无效(IE6双倍边距BUG利用display:inline解决)。

  position:relative却不会隐式改变display类型。

[转]relative、absolute和float的更多相关文章

  1. css absolute和float,relative,z-index的同异

    大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...

  2. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  3. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  4. position:absolute和float会隐式的改变display类型

    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...

  5. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  6. CSS相对|绝对(relative/absolute)定位

    1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...

  7. absolute 和float

    position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠 ...

  8. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  9. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

随机推荐

  1. JSTL核心标签库使用

    JSTL是什么? java standard taglib(java标准标签库). 标签是什么? sun公司制订的一种技术规范,用来将jsp页面中的java代码使用类似于html当中的标记来替换 的一 ...

  2. Tomcat日志输出在linux和windows差异

    tomca日志保存在${catalina}/logs目录下: 主要包括五类文件,开发测试常使用的日志主要保存在catalina.localhost日志中,且每天生成独立日志文件,结尾以日期命名,方便查 ...

  3. Tomcat 集群模式下 Session 更新 Bug (redis memcached 及tomcat自已的集群)

    从 excel 中导入数据入系统,我们用的是先上传文件至服务器再分析所上传的文件逐行导入. 就是执行了一循环,在当前循环位置标识一下客户端就知道执行的进度了,以前的方式 是用 session.setA ...

  4. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  5. 安装配置NFS服务

    超级好的配置centos下服务的链接 http://www.server-world.info/en/note?os=CentOS_6&p=nfs http://linux.vbird.org ...

  6. 辅助写作软件:PPT写作助手 帮助创作多图少字文章

    读图时代,应该创作“多图少文”的文章. PPT是制作图形最佳工具之一.将“PPT + 文字说明” 结合, 是PPT写作助手开启的全新创作方式,让图文文章更方便创作. PPT写作助手帮助您:1. 方便进 ...

  7. (String) | String.valueOf()

    Map m = new HashMap(); Integer i = 5; String s = null; m.put("val1", i); m.put("val2& ...

  8. Python的Descriptor和Property混用

    一句话,把Property和Descriptor作用在同一个名字上,就只有Property好使.

  9. 自定义android RadioButton View,添加较为灵活的布局处理方式

    android的RadioButton的使用历来都让人比较头疼,如在布局方面,图案.文字无法分别设置padding等,另外,低版本的android RadioGroup不支持换行排列的RadioBut ...

  10. FFRPC应用之Client/Server

    摘要: Ffrpc 进行了重构,精简了代码,代码更加清晰简洁,几乎完美的达到了我的预想.接下来将写几遍文章来介绍ffrpc可以做什么.简单总结ffrpc的特性是: Ffrpc是c++ 网络通信库 全异 ...