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. 安装Python图型处理库Python Imaging Library(PIL)

    方法1: 在Debian/Ubuntu Linux下直接通过apt安装: $sudo apt-get install python-imaging Mac和其他版本的Linux可以直接使用easy_i ...

  2. 单独卸载vs2010帮助文档HelpView之后的独立安装教程

    由于本人的HelpView经常出错,一气之下卸载之,随后发现修复无用,安装提示“必须要在vs2010安装过程中才能安装”这不是坑爹吗.. 感谢网友Jason提供的方法,更简单. 安装程序选择(或控制面 ...

  3. aehyok.com的成长之路一——开篇

    前言   不得不说最近三个月都没更新博客了,除了6月初的一篇博客外,今天的这一篇算是这三个月里发表的第二篇博客了.不过本人几乎每天都在博客园里刷来刷去,看大家发表的博文,从中汲取营养.确实博客园也可以 ...

  4. 解决连接MySql速度慢的方法

    最近在Linux服务器上安装MySql5后,本地使用客户端连MySql速度超慢,本地程序连接也超慢.解决方法:在配置文件my.cnf的[mysqld]下加入skip-name-resolve. 原因是 ...

  5. 努力学习 HTML5 (4)—— 浏览器对语义元素的支持情况

    经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...

  6. Search-ADaccount

    查询被锁定用户 Search-ADAccount -LockedOut | FT Name,ObjectClass -A Search-ADAccount Search-ADAccount Gets ...

  7. web跨域解决方案

    阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识 ...

  8. mac上parallel与virtualbox无法共存

    Mac reboots when you attempt to launch Parallels Desktop 8 and Virtual Box simultaneously Article ID ...

  9. Xshell中文乱码问题

    1.  先查看当前使用的语言: echo $LANG 2.  查看系统的语言安装包: locale 3.  如果没有中文安装包(包含zh_CN字样),需要网络或者自己上传安装包,安装 4.  有了中文 ...

  10. centos7 linux 安装jdk8

    1.下载64位jdk8 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.在 ...