absolute:

  元素完全脱离文档流,不占文档流的位置,不使用top、left等属性时,仍然在原文档流位置上(但是不在文档流中,也不占用位置),设置了top、left等之后,向上寻找到第一个非static元素作为父元素进行定位。

  设置为absolute会令元素的display转变为inline-block,宽度不再是默认100%,而是实际占用,可以设置width:100%来改变。absolute元素由于脱离了文档流,在父元素的宽度计算中,不会计入。

relative:

  元素脱离文档流,但是还占用文档流中的位置,根据原位置进行偏移。(top、left等也有效)

float:

  同relative一样脱离文档流,也占用文档流的位置,与relative有所不同的是,它会影响正常文档流中的文字和inline元素,围绕在自身周围。display也会转变为inline-block。

参考:http://www.cnblogs.com/fu277/archive/2012/03/13/2393519.html

[原创]关于absolute、relative和float的一些思考的更多相关文章

  1. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  3. 2016/2/19 position: fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  4. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  5. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  6. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  7. css 定位(fixed > absolute > relative)与层级zIndex 的权限认知

    原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...

  8. 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

    首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...

  9. html中相对(relative),绝对(absolute)位置以及float的学习和使用案例 (转)

    这几天着手于CSS的研究,研究的原因主要是工作需要,最近发现如果做前端仅仅会javascript很难尽善尽美,当然懂样式和html在一定程度上可以让我们更近一步. css较为简单,由于个人擅长编写代码 ...

随机推荐

  1. ES里关于对象的拓展

    一.对象类别 在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象,对象的类别如下 1.普通(Ordinary)对象:具有JS对象所有的 ...

  2. log4j教程 11、日志记录到文件

    要写日志信息到一个文件中,必须使用org.apache.log4j.FileAppender.有以下FileAppender的配置参数: FileAppender配置: 属性 描述 immediate ...

  3. 【Zookeeper】Zookeeper部署笔记

    Zookeeper部署笔记 .上传zk安装包 .解压 .配置(先在一台节点上配置) .1添加一个zoo.cfg配置文件 $ZOOKEEPER/conf mv zoo_sample.cfg zoo.cf ...

  4. zabbix自动化监控之自动注册

    自动注册与自动发现刚好相反,是zabbix agent主动联系zabbix server,最后由zabbix server将这些agent加到host里.活动的Zabbix agent可以自动注册到服 ...

  5. Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  6. Django内建模版标签和过滤器

    第四章列出了许多的常用内建模板标签和过滤器.然而,Django自带了更多的内建模板标签及过滤器.这章附录列出了截止到编写本书时,Django所包含的各个内建模板标签和过滤器,但是,新的标签是会被定期地 ...

  7. 【引用】python 静态函数 类函数 实例函数

    1.关于定义类的一些奇特之处  今天在Python中定义一个类,很奇怪,不需要事先声明它的成员变量吗?暂时不知,先记录下来: class Account(object):    "一个简单的 ...

  8. 代理工具Charles使用

    代理工具Charles使用 分类: MAC 2014-03-27 20:41 7810人阅读 评论(2) 收藏 举报 手机开发 一.跟踪HTTPS 1.下载官方的证书ssl.zip证书,解压成*.cr ...

  9. Android布局中 android:layout_gravity="bottom"为何不起作用?

    在android布局时我们有时会需要将位于LinearLayout布局中的控件放在布局底部,或者是同时想将几个控件底部对齐,此时我们自然会想到使用 android:layout_gravity=&qu ...

  10. Ubuntu安装sublime test 3 (Build 3126)

    Ubuntu下 Sublime Text 3 (Build 3143) 存在一些bug........ 满心欢喜地更新后, 又默默换回Build 3126 1. 安装 sudo apt-get upd ...