css的相对、绝对、固定定位的详细介绍

定位综述

1. 定位：手动控制元素在包含块中的精准位置

2. 涉及的CSS属性：position

   position属性
       - static(默认值), 静态定位（不定位）
       - relative: 相对定位
       - absolute: 绝对定位
       - fixed: 固定元素
   

3. 一个元素，只要position的取值不是static，认为该元素是一个定位元素，定位元素会脱离文档流(相对定位除外)

   (1) 文档流中的元素摆放时，会忽略脱离了文档流的元素(跟浮动一样,想象成在天上)
   (2) 文档流中的元素计算自动高度时，会忽略脱离了文档流的元素      //(1)和(2)为脱离文档流元素特点)
   

相对定位

1. 特点：不会导致元素脱离文档流，只会让元素在原来的位置上进行偏移 (相对于自身位置)

2. 可以通过四个CSS属性设置其位置 ，盒子的偏移不会对其他盒子造成任何影响

     - left       //一般以它位主
     - right
     - top        //一般以它位主
     - bottom
   
     例 .box{
   	    position:relative;
   	    top:100px;
           left:150px;
        } 
   

绝对定位

1. 特点： 宽高为auto，适应内容

2. 定位的相对元素： 包含块变化，从父级开始找祖先元素中第一个定位元素，该元素的填充盒(padding盒[包含内容盒])为其包含块，若找不到，则它的包含块为整个网页html(初始化包含块)

固定定位

1. 比较绝对定位：其他情况和绝对定位完全一样，区别在于包含块不同：固定为视口 (浏览器的可视窗口)

2. 定位下的居中(脱离文档流)：

   （1）某个方向居中
          1.定宽(高)
          2.将左右(上下)距离设置为0
          3.将左右(上下)的margin设置为auto;
   
         注：绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
   
         例：left:0;
               right:0;
               top:0;
               bottom:0;
               margin:auto;    (水平垂直都居中)              //因为子盒的左边要贴左边，右边要贴右边,只能靠margin各吸收一半
   
   （2）在水平方向只定了left的值为0,margin为自动不会居中，剩余内容被right吸收了，不会给margin，
       区别于常规流，要考虑left，right
   

多个定位元素重叠时 （后面会专门一章讲堆叠）

1. 设置z-index，通常情况下，该值越大，越靠近用户

2. z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖 // 只有定位元素设置z-index有效

补充

• 绝对定位、固定定位一定为块盒

• 绝对定位、固定定位一定不是浮动（浮动元素加了定位，float会被强行变为none，不在浮动）

• 没有外边距合并（跟浮动元素一样，脱离常规流都不存在）