14.绝对定位

1. 绝对定位脱离标准流
   

   1.脱标后不再区分行内元素/块级元素了，故行内元素span等不需要设置display:block就可以设置宽高
   2.top/bottom:100px;是相对于当前页面左上角/左下角向下/上移动100px.left/right同理

2. 参考点

   绝对定位参考点，如果用top描述，那就是当前页面左上角，如果用bottom描述，那就是浏览器首屏页面的左下角。故当卷动页面时，定位后的元素会消失在页面中。而向上拉动浏览器时，用bottom定位的元素会跟着向上而不会消失。
   用bottom定位的时候参考的是首屏页面对应的左下角
   

3. 以盒子为参考点：一个绝对定位的元素，如果父辈也出现了定位的元素，那么将以父辈这个元素为参考点。子为相对定位则都以父亲

   <div class="box1">
     <div class="box2"></div>
   </div>

   *{
      padding: 0;
      margin: 0;
   }
   .box1{
     width: 400px;
     height: 400px;
     border: 2px solid red;
     margin: 100px;
     position: relative;
    }
    .box2{
     width: 50px;
     height: 50px;
     background-color: yellow;
     position: relative;
     top: 30px;//任何定位都是可以的，不分绝对定位相对定位。工程里用“子绝父相”，因为父亲没有脱离标准流
     left: 30px;//父元素也有定位后，子盒子定位以父盒子为参考，而不是浏览器左上角。有多个祖辈元素有定位，则参考最近的，如果只有一个，那则听有定位的
    }

4. 绝对定位的儿子无视也有定位的父辈的padding，从border开始算
   

5. 相对定位的儿子，如果父辈元素也是定位元素那也不考虑，如果不是那要考虑父亲的padding
6. 绝对定位的盒子居中

       绝对定位后标准流规则失效
   
       .box1{//absolute居中
         height: 100px;
         width: 400px;
         background-color: red;
         position: absolute;
         margin: 0 auto;
         left: 50%;//左线居中
         margin-left: -200px;//向左缩进宽度一半
       }