特性:

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. SNS团队第一次站立会议(2017.04.22)

    一.当天站立式会议照片 本次会议主要内容:进一步明确了团队中各个成员的定位,说明了下一步团队工作的方向 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 罗于婕 系统架构设计及项目数据库设 ...

  2. 201521123019 《Java程序设计》第7周学习总结

    1. 本章学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1解释ArrayList的contains源代码 源代码如下: public boolean contains(Object ...

  3. 201521123073 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 源代码: ...

  4. 201521123119《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 Q1.clone方法 Q1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 只能在本类内部或者和 ...

  5. 201521123085 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...

  6. 201521123050《Java程序设计》第2周学习总结

    本周学习总结 (1)掌握各种数据类型的使用 基本类型 整数类型(byte,short,int,long,char) 浮点类型(float,double) boolean类型(true, false) ...

  7. 201521123036 《Java程序设计》第13周学习总结

    本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分 ...

  8. 201521123013 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ping值 ...

  9. 201521123009 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 Q1:finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? tr ...

  10. 201521123015 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? IP地址不同 ...