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. document对象操作：浏览器页面文件

    //找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span>& ...

  2. shiny server SparkR web展示界面（一）

    1. shiny server简介 shiny-server是一种可用把R 语言以web形式展示的服务,下面就讲讲如何在自己的服务器上构建Shiny Server.下一篇主要介绍如何集成sparkR后 ...

  3. Git基本命令（一）

    (一)有关配置信息的Git命令 1.查看本地设置的属性  git config user.name/user.email 2.显示本地配置信息  git config -l(小写的L) 3.修改当前全 ...

  4. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  5. SAFS Init Files

    There're many deployment files for configuration. We need to learn how SAFS read these depolyment fi ...

  6. C# Bitmap类型与Byte[]类型相互转化

    Bitmap   =>   byte[]  Bitmap b = new Bitmap( "test.bmp "); MemoryStream ms = new Memory ...

  7. 通过生产者消费者模式例子讲解Java基类方法wait、notify、notifyAll

    wait(),notify()和notifyAll()都是Java基类java.lang.Object的方法. 通俗解释wait():在当前线程等待其它线程唤醒.notify(): 唤醒一个线程正在等 ...

  8. 关于Domino数据库的软删除

    在Domino的数据库属性的 “高级” 附签(选择文件->数据库->属性),选中“允许软删除”,这样我们就启用了软删除功能,当一个文档没有删除的时候我们可以使用NotesDatabase的 ...

  9. java 调用 .net webservice 示例

    String url="http://IP:端口/LisService.asmx"; String methodName="GetLisResultForBlood&qu ...

  10. jQuery中position()与offset()区别

    使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同. 可以看看下边的图: ...