根据张鑫旭老师的博客,一些笔记留作备忘

1、position:absolute

具有包裹性——包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签。

具有破坏性,会使父元素高宽塌陷。

有评论说absolute不会使宽度塌陷,实验后确实如此。

absolute不利于扩展维护,尽量少用。

2、absolute可用于实现左右分栏等高的效果

div元素absolute后不在文档流中,设置足够高的高度,边界可用于分栏的中线。

父元素要overflow hidden。

3、现代浏览器下block水平元素absolute化后不支持图片混排

4、relative影响最小化

将需要绝对定位的元素单独放在relative属性的标签下,于是,relative相对定位就不会影响任何其他元素,仅仅是其内部的绝对定位元素。

定位这个东西,如果要使用相对定位属性或是绝对定位属性,我个人比较推荐如下组合:absolute+margin(左上角元素定位,作用于当前元素)、float+relative(右上角元素定位,作用于当前元素)和relative+absolute(右下角元素定位,直接父标签+当前定位元素)。而目前web届大肆使用的外层div层设置relative属性,里面一些absolute元素定位的方法是不推荐的。

css-关于absolute和relative的一些笔记的更多相关文章

  1. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  2. css 布局absolute与relative的区别

    absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...

  3. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  4. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  6. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  7. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  8. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  9. CSS相对|绝对(relative/absolute)定位

    1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...

随机推荐

  1. iis 发布MVC HTTP错误 403.14

    1. 在web.config增加<modules runAllManagedModulesForAllRequests="true" /> 如:问题依然不能解决.报错貌 ...

  2. Linux Linux程序练习十三(信号阻塞,捕获)

    /* * 题目: * 请编写一个程序,设置SIGINT和SIGQUIT信号, * 并在该程序中实现从文件中读取信息的操作, * 并保证在读取文件且只有在读取文件的过程中不会被发送的SIGINT和SIG ...

  3. Ztree 随笔记

    Ztree方法是一个单体对象方法,假如一个页面有多个的话,每申明一个新对象前面的Ztree对象就要被覆盖. 解决:在生成tree控件的时候就要设置其控件ID,然后通过$.fn.zTree.getZTr ...

  4. 安卓开发:效果图中标注的像素尺寸如何转换为安卓的dp尺寸?

    我们的UI基于1920x1080分辨率给的尺寸标注,但是在安卓开发中大家一般都使用dp.sp来标注界面尺寸,所以需要一个dp与sp的转换公式. 一开始参考的的这篇文章:关于Android开发中px.d ...

  5. Oracle PL/SQL 入门

    PL/SQL 全称:Procedure Language/SQL.产生背景自己去百度. 模板: Declare ---变量定义 num ; name ) := 'damon'; idesc cnt_i ...

  6. SQLServer(MSSQL)、MySQL、SQLite、Access相互迁移转换工具 DB2DB v1.4

    最近公司有一个项目,需要把原来的系统从 MSSQL 升迁到阿里云RDS(MySQL)上面.为便于测试,所以需要把原来系统的所有数据表以及测试数据转换到 MySQL 上面.在百度上找了很多方法,有通过微 ...

  7. VS条件断点的一个坑

    今天早上要调试一个方法,所以在方法的入口处也就是’{’打了一个条件断点,可是随后就发现对这个方法的调用都无法获得正确的结果了,不管传递什么参数,方法的返回值都一样,而且这个返回值与输入的参数完全无关, ...

  8. .Net 异步方法加上“timeout”

    在本羊读大学的时候,Thread让本羊云里雾里,代码写的痛不欲生,真的是让本羊脑袋里很多“线”缠绕在一起. 之后,Task让本羊代码写的飞起,甚至有时候根本不需要Task的时候还是要写上,那样显得档次 ...

  9. 基于Laravel+Swoole开发智能家居后端

    基于Laravel+Swoole开发智能家居后端 在上一篇<Laravel如何优雅的使用Swoole>中我已经大概谈到了Laravel结合Swoole的用法. 今天,我参与的智能家居项目基 ...

  10. Competition-based User Expertise Score Estimation-20160520

    1.Information publication:sigir 2011 author:Jing Liu Harbin Institute of TechnologyMicrosoft Researc ...