absolute属性

Posted 2020-07-15

1. absolute与float

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

2. 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方法