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. paip.多维理念 输入法的外码输入理论跟文字输出类型精髓

    paip.多维理念 输入法的外码输入理论跟文字输出类型精髓 通常,我们的输入法使用的外码是拼音,但是,这个的用户体验很差.. 应该使用多个外码类型... ##按照词汇来源,有如下几个 固有词ati 来 ...

  2. Quartz定时任务学习(一)简单任务

    学习quartz首先了解三个概念: 调度器:负责调度作业和触发器: 触发器:设置作业执行的时间.参数.条件等:(简单触发器和Cron触发器) 作业:定时任务内容,被执行的程序: 下载必要的jar包,直 ...

  3. windows server 2008 R2 FTP登陆错误。

    建立了一个域用户ftp. 始终登陆不上winserver 2008 R2上的FTP. 错误如下: 530-User cannot log in. Win32 error:   Logon failur ...

  4. ZooKeeper快速搭建

    原文地址:http://nileader.blog.51cto.com/1381108/795230 下载PDF版本 本文是ZooKeeper的快速搭建,旨在帮助大家以最快的速度完成一个ZK集群的搭建 ...

  5. CentOS下httpd下php 连接mysql 本机可以,127.0.0.1不能访问

    你看到的这个文章来自于http://www.cnblogs.com/ayanmw php代码很简单: $server="127.0.0.1"; println("Begi ...

  6. C++程序中调用MPI并行的批处理命令

    问题来源:在使用MPI时,将程序并行实现了,运行时需要在dos窗口下输入批处理命令,以完成程序的执行. 如:mpiexec -localroot -n 6 d:/mpi/pro.exe 但每次这样挺麻 ...

  7. 【linux】vim编辑器vim+taglist+ctags的配置

    很多linux软件开发实际上并不实在X window的情况下进行的,这时我们不可能启动基于X window的图形化窗口,在这一情况下我们所能使用的主要的编辑器是vim和emacs.(ps:emacs和 ...

  8. Linux查看端口、进程情况及kill进程

    看端口: ps -aux | grep tomcat 发现并没有8080端口的Tomcat进程. 使用命令:netstat –apn 查看所有的进程和端口使用情况.发现下面的进程列表,其中最后一栏是P ...

  9. 使用cocos2d-x v3.1开发小游戏(基本框架)

    小游戏的组成 欢迎界面 在游戏资源未全部加载完之前就需要载入,避免进入游戏会有一段黑屏时间. 可以用来展示游戏名称或者开发者logo. 开始菜单界面 一般用于显示游戏名称和关卡选择(或者称游戏难度选择 ...

  10. 使用 jsErrLog 分析 js 报错

    1. github 地址: https://github.com/Offbeatmammal/jsErrLog/tree/master/src 2. 在所有页面引入 jsErrLog,配置出错时打日志 ...