【css基础学习五之定位、边偏移、定位实现盒子水平居中、z-index、和子绝父相的布局模式】

定位---position 

 让元素在任意地方显示

元素的定位属性主要包括定位模式和边偏移。

边偏移
 top 顶端偏移量,定义元素相对于其父元素上边线的距离
 bottom 底部偏移量,定义元素相对于其父元素下边线的距离
 left   左侧偏移量,定义元素相对于其父元素左边线的距离
 right  右侧偏移量,定义元素相对于其父元素右边线的距离

也就说，以后定位要和边偏移搭配使用了， 比如 top: 100px;  left: 30px; 

定位
  静态定位static 默认

  
  一.相对定位relative（自恋型）---->相对定位不脱标,保留位置

  1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。

  2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

 二.绝对定位absolute(拼爹型)
--->绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。
  绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

重要：子绝父相(子级是绝对定位的话， 父级要用相对定位)

  原因：因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

        父盒子布局时，需要占有位置，因此父亲只能是 相对定位. 

  

 绝对定位的盒子水平/垂直居中(重要)
   普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。
    

1. 首先left 50%   父盒子的一半大小

    2. 然后走自己外边距负的一半值就可以了 margin-left。

   eg：绝对定位实现水平居中
    .father{
       width:300px;
       height:400px;
       background-color:pink;
       position:relative;
    }
    .son{
       width:100px;
       height:50px;
       background-color:green;
       position:absolute;
       left:50%;
       margin-left:-50px;
    }
       <div class="father">
        <div class="son"></div>
    </div>
 三.国定定位fixed（认死你型）

    1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
        
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

  叠放次序(z-index)
   eg:z-index:2; z-index:999;
   1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

   2. 如果取值相同，则根据书写顺序，后来居上。

   3. 后面数字一定不能加单位。
   
   4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

 四.定位元素转换

   
跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换， 都转换为行内块模式，

  行内块的宽度和高度跟内容有关系。因此 比如行内元素，如果添加了绝对定位或者固定定位后，浮动后，可以不用转换模式，直接给高度和宽度就可以了。
 

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）