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. 菜鸟日记-HTML-表格与表单

    一.表格 <table></table> width:宽度.可以用像素或百分比表示. border:边框,常用值0 cellpadding:内容跟单元格边框的边距.常用值0 a ...

  2. muduo库的简单使用-echo服务的编写

    muduo库的简单使用 muduo是一个基于事件驱动的非阻塞网络库,采用C++和Boost库编写. 它的使用方法很简单,参考这篇文章:TCP网络编程本质论 里面有这么几句: 我认为,TCP 网络编程最 ...

  3. 从零开始学Bootstrap(2)

    继从零开始学Bootstrap(1)后,我们需要实际做一些页面,边学边做.因为前端是一项非常注意实践的技术,知识点太多.太琐碎了,所以我们只能边学边做.根据我们想要做的效果,去查相应的资料.不要想着把 ...

  4. iOS10之后openURL:方法过期之后的替代方法及使用

    目前苹果为iOS10开放了一个key:UIApplicationOpenURLOptionUniversalLinksOnly但亲测无效 目前使用的是这个key:UIApplicationOpenUR ...

  5. OpenGL学习进程(11)第八课:颜色绘制的详解

        本节是OpenGL学习的第八个课时,下面将详细介绍OpenGL的颜色模式,颜色混合以及抗锯齿.     (1)颜色模式: OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. R ...

  6. 动软商城系统可免费下载了,专业批发分销商城系统,ASP.NET商城系统

    动软商城系统是一套集CMS资讯+品牌Shop商城+WAP商城+APP手机客户端+SNS用户互动社区于一体的全新电商营销解决方案.主要为企业树立企业品牌形象,实现独立网络推广,充分集成网站SEO.企业微 ...

  7. KVM 基础使用(一)

    Host OS:CentOS release 6.3 (Final) x64 安装时选择Virtual Host 1.测试KVM有没有启动 运行 lsmod | grep kvm 和 stat /de ...

  8. Spring 4.3.2下实现http多次断点下载

    其实跟 spring 无关,如果是直接下载资源很多 web sever 不用程序就直接实现了断点. 但我们的应用是 download?url=xxxx 这种方式 下载资源由 download 来负责, ...

  9. eclipse,myeclipse开发环境下,maven远程部署到tomcat7服务器(图文)

    有的人想在eclipse写java web 项目,通过maven也是一种实现的方法,可以实现java web 项目打包成war,发布到tomcat. 在pom.xml文件的build增加下面的代码,相 ...

  10. Microsoft.VisualBasic.DateAndTime.Timer 与 DateTime.Now.TimeOfDay.TotalSeconds 相当

    如题,示例如下: Console.WriteLine(DateTime.Now.TimeOfDay.TotalSeconds); Console.WriteLine(Microsoft.VisualB ...