absolute属性

absolute与float

• 具有同样的性质
  • 包裹性
  • 破坏性

absolute性质

1. 可以脱离overflow的限制
2. 无依赖的absolute定位
   • 无依赖的定义：
     • 不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或者使用auto作为值
   • 无依赖的表现
     • 脱离文档流
     • 折翼天使
       • 去浮动
       • 位置跟随
     • 利用margin准确定位
   • 无依赖的应用
     • 图标图片定位覆盖
     • 下拉框定位
     • 居中边缘定位
     • 文本图标对齐与定位
   • 脱离文档流z-index无依赖
     1. 如果只有一个绝对定位元素，那么absolute元素就会覆盖普通元素
     2. 如果有两个绝对定位元素，那么利用DOM文档流后来居上的规则就可以解决
     3. 如果有多个绝对定位元素，那么z-index:1 ，不过出现这种情况要考虑自己的代码是否有优化的地方
     4. 如果给弹框类的绝对定位元素z-index>2，那么必定冗余，请优化！！！

3. absolute与left/top/bottom/right

   1. 相互替代
      • left/top/bottom/right 如果都存在的话，显示的是拉伸效果
   2. 相互支持
      • 容器无需固定的高度和宽度值，内部元素也可以拉伸
      • 容器拉伸，内部元素支持百分比width/height值
   3. 相互合作
      • margin auto   - 居中效果
   4. 注意：
      • 通常情况下，元素百分比height要想起作用，需要父级容器的height值不是auto，但是在绝对定位下，即使父级容器的height值是auto，只要容器绝对定位拉伸形成，百分比的高度也是支持的

4. absolute与整体页面布局

   1. 无固定尺寸容器内的绝对定位元素拉伸
   2. 没有宽度和高度声明实现的全屏自适应效果
   3. 高度自适应的九宫格效果
      • 大致理解为有三层div，最外面就是list这一层，中间是list:before这一层，最里面当然就是list:after这一层
      • 最外面一层负责隔离，加上relative，把各个层给分隔开。因为我们知道absolute没把他们分开是会重叠在一起的，而且不加上relative会使得相对目前的窗口，你就只能看到一个大格子
      • 中间那层就是list相关
      • 最里面就是用来摆弄里面的文字，因为这里的布局在html都不怎么重要，所以选择了after和before方法