特性:

absoulte 与 float 具有相同的特性:包裹性,与破坏性
  absoulte 与 float 可以交替使用
  不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性

行为表现

脱离文档流
  去浮动( float absoulte 元素不能同时出现)
  位置跟随(还在原来的位置)
  问题: IE7使用 absoulte 的元素永远是 inline-block 元素
  解决: 外层套一层无设置属性的标签

可以配合margin 精确定位

支持负值定位
  兼容性强 IE6
  自适应强,维护性好,具有健壮性

动画尽量作用与绝对定位元素上,多个 absoulte 元素会重叠,后者居上

z-index 无依赖

如只有一个 absoulte 元素,不需要设置
  如两个 absoulte 元素,控制DOM流的顺序,也可不需要
  多个定位交错, z-index: 1 控制
  非弹框类的 absoulte 元素, z-index <= 2 若冗余,需优化

left/right/top/bottom与width/height可相互替代

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7+支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

absoulte整体布局

<header></header>
<article>
   <aside></aside>
   <main></main>
</article>
<footer></footer> 
 ;; }
 ; }
 ; }
 ;;; }
 ; left: 200px; overflow: auto;}

CSS之 absoulte 属性的更多相关文章

  1. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  2. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  3. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  4. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  5. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  6. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. 【Beta】 第二次Daily Scrum Meeting

    一.本次会议为第二次meeting会议 二.时间:13:30AM-13:55AM 地点:禹州 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 对已完成的功能进行进一步测试,以便 ...

  2. Java:print、printf、println的区别

    printf主要是继承了C语言的printf的一些特性,可以进行格式化输出 print就是一般的标准输出,但是不换行 println和print基本没什么差别,就是最后会换行 System.out.p ...

  3. Spring MVC的文件上传

    1.文件上传 文件上传是项目开发中常用的功能.为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data.只有在这种情况下,浏览器才会把用户 ...

  4. JavaScript 基本语法结构

    1 变量 JavaScript的变量是弱类型的,就是所有的对象都是使用var 来进行声明 2 变量的命名规则 1.由字母.数字.下划线组成,区分大小写 2.以字母开头 3.变量名不能有空格 4.不能使 ...

  5. 常见注入手法第一讲EIP寄存器注入

    常见注入手法第一讲EIP寄存器注入 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 鉴于注入手法太多,所以这里自己整理一下, ...

  6. JVM菜鸟进阶高手之路七(tomcat调优以及tomcat7、8性能对比)

    转载请注明原创出处,谢谢! 因为每个链路都会对其性能造成影响,应该是全链路的修改压测(ak大神经常说全链路!).本次基本就是局域网,所以并没有怎么优化,其实也应该考虑进去的. Linux系统参数层面的 ...

  7. Manacher详解

    之前的字符串题解中对Manacher的思想进行了简略的介绍,在这篇文章中,我将会详细的将这个算法的初衷和具体实现理论进行解释.声明一点,这是我个人的理解,可能有不全面之处,望多包涵.在之前的几篇文章中 ...

  8. Linux 文件查找

    在Linux系统的查找相关的命令: which 查看可执行文件的位置 whereis 查看文件的位置 locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称 whereis wher ...

  9. java中判断字符串是否为数字的方法的几种方法

    1.用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = 0; i < str.length(); i++){ ...

  10. python基础之五大标准数据类型

    学习一门语言,往往都是从Hello World开始. 但是笔者认为,在一个黑框框中输出一个"你好,世界"并没有什么了不起,要看透事物的本质,熟悉一门语言,就要了解其底层,就是我们常 ...