绝对定位篇

position:absolute

1. 无依赖绝对定位。

   当该元素没有设置top,right,bottom,left任意一个或者多个值时，该元素无任何影响，否则它会去寻找最近有position：relative属性的祖辈（没有则是body元素），并基于该祖辈定位。

2. absolute的流体特征

• 一般我们会根据阅读或者文档流的顺序（自上而下，从左到右）的需要，设置absolute的top，left就能达到定位效果。实际元素在被设置的方向上是“绝对定位”的特性，在另一个方向是保持着相对定位的特性。

• 谈及流体特性，普通块级元素在水平方向是具有流体特性的，然而绝对定位的元素具有类似的流体特性，某些情况下比普通块级元素更强大。

• absolute要实现自身的流体特性是有条件的，元素直接设置style=”position：absolute；margin：auto；“,外边距margin：auto属性是不会有任何计算的，那么如何让absolute元素拥有流体特性呢？条件是”对立方向同时发生定位“的时候。

• 流体特性最显著的特点就是自动铺满流体方向上的空间 。

3. 实现元素铺满屏幕

<style>
    /* 方法一 利用流体特性的流动性*/
    .son {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    /* 方法二 设置宽高 */
    .son {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }
</style>

二者的效果虽然相同，但是原理是不一致的，后者设置了宽高，此时元素失去了流动性，此时元素尺寸已被计算，此时添加内边距，外边距会造成”宽高溢出的表现。

4. 利用absolute实现水平垂直居中对齐

   <style>
       /* 方法一 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
       }
   ​
       .bar {
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin:auto;
           width: 200px;
           height: 200px;
           background: #B03060;
       }
       
       /* 方法二 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
       }
   ​
       .bar {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%)
           background: #B03060;
       }
       
       /* 方法三 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
       }
   ​
       .bar {
           position: absolute;
           margin-top: 50%;
           margin-left: 50%;
           transform: translate(-50%, -50%)
           background: #B03060;
       }
   </style>

   1. 定位元素对立方向只设置单属性值时，该元素具有包裹性，包裹性包括包裹和自适应。

   2. 方法1是需要给绝对定位的元素设置宽高，该元素居中是自适应的，而大小是固定的；

   3. 方法2，3不需要设置绝对定位元素的宽高，该元素位置，大小都是自适应的，但是自适应尺寸最大不能超过父亲内容尺寸的一半，强制设置大于父亲内容尺寸的一半会改变布局大小（chrome，Firefox的表现看不出来，ie11下的版本会有）