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

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. Meet Python: little notes

    Source: http://www.liaoxuefeng.com/ ❤ Escape character: '\' - '\n': newline; - '\t': tab; - '\\': \; ...

  2. ssh 免密码设置失败原因总结

    先复习一下设置ssh免密码操作的步骤: 进入主目录 cd 生成公钥 ssh-keygen -t rsa -P '' (注:最后是二个单引号,表示不设置密码) 然后分发公钥到目标机器 ssh-copy- ...

  3. 解决 docker on windows下网络不通

    问题:公司有一台闭置的windows服务器,于是想利用起来,但是在启动容器后始终无法通信成功. 研究: 1. 发现安装包中包含virtualbox, 于是怀疑windows下的docker是在virt ...

  4. tkinter 类继承的三种方式

    tkinter class继承有三种方式. 提醒注意这几种继承的运行方式 一.继承 object 1.铺tk.Frame给parent: 说明: self.rootframe = tk.Frame(p ...

  5. Java的性能优化

    http://www.toutiao.com/i6368345864624144897/?tt_from=mobile_qq&utm_campaign=client_share&app ...

  6. js 数组去重

    这是一道常见的面试题,最近在做[搜索历史记录]功能也用到,开始用了 indexOf 方法,该方法在 ECMA5才有支持,对于 IE8- 就不支持了. 我们可以自己写一个函数(Array对象的方法都是定 ...

  7. NLog日志管理工具

    Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中,或者发送Emial到指定账户. 可以在官网 这里下载Nlog:http://nlog-p ...

  8. 构建Spark的Eclipse开发环境

    前言 无论Windows 或Linux 操作系统,构建Spark 开发环境的思路一致,基于Eclipse 或Idea,通过Java.Scala 或Python 语言进行开发.安装之前需要提前准备好JD ...

  9. matlab 绘制条形图

    Matlab使用bar和barh函数来绘制二维条形图.分别是绘制二维垂直条形图和二维水平条形图. 转自:http://jingyan.baidu.com/article/64d05a02524e63d ...

  10. JavaScript学习笔记-简单的计时钟表

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...