9、position定位

定位：position属性用于指定一个元素在文档中的定位方式，将盒子定在某一个位置，与浮动相似，也是在摆放盒子，调整盒子的排列方式；搭配top、right、bottom、left属性确定元素在页面布局中的最终位置；
    与浮动的对比：
    1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；
    2.定位则是可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子；
    3.浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题；
    4.浮动元素的盒子会盖住盒子，但是不会盖住文字（浮动产生的最初目的是用于文字环绕效果的）；
      设置绝对定位和固定定位的元素，脱离了文档流，会盖住盒子以及盒子里的文字；

  定位=定位模式+边偏移；
  定位模式决定元素的定位方式，通过CSS属性来设置，取值主要有： 
    position：static（默认），relative、absolute、fixed、sticky；
  边偏移是将盒子进行移动；有top、bottom、left、right四个属性；一般是相对于父元素上右下左四个边线的距离；
   
   
  （1）static静态定位
       静态定位元素的默认定位方式，按照标准流特性来摆放位置，没有边偏移，在布局时很少用到；

  （2）relative相对定位
       相对定位是元素在移动位置时，是相对于它原来的位置来移动的；
       如果没有定位偏移量，对元素本身没有任何影响；
       元素在标准流的位置继续保留，不会脱离文档流，也不会影响其他元素布局；
       通过top、right、bottom、left参照当前元素自身的位置进行偏移；
    
  （3）absolute绝对定位
       绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的；
       使元素脱离文档流，不再占有原来的位置；
       使内联元素支持宽高（让内联元素具备块元素特性）；
       使块元素默认宽根据内容决定（让块元素具备内联元素特性）
       如果有定位（相对，绝对，固定）的祖先元素，元素本身相对于最近一级的有定位的祖先元素发生偏移；
       如果没有定位（相对，绝对，固定）的祖先元素，元素本身相对于整个文档（Document）发生偏移；
       注意：1.绝对定位会搭配相对定位使用，子元素使用决定绝对定位时，父元素使用相对定位；
              子元素绝对定位，不会占有位置，可以调整到父元素的任何一个地方，并且不会影响其他的兄弟盒子；
              父元素需要加定位，限制子元素在父元素中的显示；而父元素在布局时需要占有位置，所有设置相对定位是最好的；
             2.绝对定位的居中：加了绝对定位的盒子不能通过margin：0  auto；水平居中；（left：50%；margin-left：-盒子的一半距离）垂直居中同理；
       
  （4）fixed固定定位
       固定定位是元素固定于浏览器可视区的位置，可以使元素在浏览器页面滚动时位置不发生改变；
       使文档脱离文档流，不再占有原来的位置；
       使内联元素支持宽高（让内联元素具备块元素特性）
       使块元素默认宽根据内容决定（让块元素具备内联元素特性）
       以整个浏览器窗口作为参照点进行偏移，和父元素没有关系，且不受浏览器滚动条的影响；
         （通过固定定位固定在版心右侧区域---1.让固定定位的盒子left：50%，走到浏览器可视区（或者是版心）的一半位置；
                                         2.让固定定位的盒子margin-left：版心宽度的一半距离。去到版心位置的右侧；

  （5）sticky粘性定位
       粘性定位可以被认为是相对定位和固定定位的混合；在指定的位置，进行粘性操作；
       相对于浏览器的可视窗口进行定位，移动元素；
       粘性定位占有原先的位置；
       必须添加top、right、bottom、left中的其中一个才会生效；
       与页面滚动搭配使用，但是兼容性较差，IE不支持；

  （6）z-index定位层级次序
       默认层级为0，数值可以是正整数、负整数或0，数值越大，盒子越靠上；
       （注意：数值后面不能加单位，只有定位的盒子才有z-index属性）
       嵌套时候的层级问题
       进行层级比较时：1.如果属性值相同，后一个元素的层级默认比前一个元素的层级高；
                      2.父元素比子元素的层级低时，以父元素的层级进行嵌套；
                      3.父元素不设置层级时，以子元素的层级为比较嵌套；