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

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. Java8 Lambda表达式和流操作如何让你的代码变慢5倍

    原文出处:ImportNew 有许许多多关于 Java 8 中流效率的讨论,但根据 Alex Zhitnitsky 的测试结果显示:坚持使用传统的 Java 编程风格——iterator 和 for- ...

  2. C语言:关于socket的基础知识点

    /** * ---结构体--- * * #include <sys/socket.h> * struct sockaddr { * unsigned short sa_family; * ...

  3. WKWebView捕获HTML弹出的Alert和Confirm

    之前用WebView装载一个网页时,弹出Alert时会显示网址,由于不想把网址暴露给用户这样显示就不是很友好了.UIWebView文档内没有找到可以捕获这类信息的API.GOOGLE了下发现了WKWe ...

  4. 005商城项目:ssm框架的整合成功之后的问题:使用maven的tomcat插件时的debug

    在执行maven的clean时经常碰到一个问题: 解决: 然后: 还有一个问题是:用maven 使用Debug调试时,不能看到源代码. 解决办法: 下面选择Debug Configurations 这 ...

  5. echo使用说明,参数详解

    简介 echo [OPTION]... [STRING]... 描述 -n 末尾不加换行 -e 开启输出字串中对反斜杠的转译 -E 禁用反斜杠转译 只有开启-e参数的时候,下面的命令才能起作用: \0 ...

  6. 0 bug 读后感

    本书全名是 <0 bug- C/C++商用工程之道>,这是一本有争议的书,豆瓣链接: http://book.douban.com/subject/4149139/ ,建议有一些商用的开发 ...

  7. c++基础 explicit

    c++的构造函数也定义了一个隐式转换 explicit只对构造函数起作用,用来抑制隐式转换 看一个小例子 新建一个头文件 #ifndef CMYSTRING_H #define CMYSTRING_H ...

  8. 让 innerHTML 进来的 script 代码跑起来

    今天来简单聊聊如何让 innerHTML 进来的 scrip 代码跑起来的问题. 前台请求一个接口,接口返回一些 HTML 标签拼接成的字符串,以供前端直接 innerHTML 生成 DOM 元素,这 ...

  9. 用c#操作Mongodb(附demo)

    因为需要,写了一个基于泛型的helper,这样要使用起来方便一点. 为了大家也不重复造轮子,所以发出来希望能帮到谁. 复杂的查询最好用linq,这也是mongodb官方建议的. mongodb的C#配 ...

  10. 从零开始搭建架构实施Android项目

    我们先假设一个场景需求:刚有孩子的爸爸妈妈对用照片.视频记录宝宝成长有强烈的意愿,但苦于目前没有一款专门的手机APP做这件事.A公司洞察到市场需求,要求开发团队尽快完成Android客户端的开发.以下 ...