前端学习03- position 定位

1.1 静态定位 static

         静态定位就是元素默认的定位方式，无定位的意思

1.2 相对定位 relative（重要）

      相对定位是元素在移动位置的时候，是以相对于它原来的位置来说的
      特点：

•     相对于自己原来的位置移动
•     原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它（继续保留原来位置）

1.3 绝对定位 absolute（重要）

      绝对定位是元素在移动位置的时候，相对于祖先元素来讲的
      语法：选择器：{ position: absolute; }
      特点：

• 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位；
• 如果祖先元素有（相对、绝对、固定定位），则以最近一级的有定位祖先元素的参考点移动位置

1.4 子绝父相

      子级是绝对定位的话，父级要用相对定位。

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位

      因此，相对定位经常用来作为绝对定位的父级
      总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

1.5 固定定位 fixed（重要）

       固定定位是元素固定于浏览器的可视区的位置。主要使用场景：可以再浏览器页面滚动时元素的位置不会改变
      特点：

• 以浏览器的可视窗口为参照点移动元素

              跟父元素没有任何关系

              不随着滚动条滚动

• 固定定位不占有原有位置

     固定定位小技巧：固定在版心右侧位置
     小算法：1.让固定定位的盒子 left:50% .走到浏览器可视区的一半位置。
                  2.让固定定位的盒子 margin-left:版心宽度的一般距离。

1.6 粘性定位 sticky

      粘性定位可以被认为是相对定位和固定定位的混合
      特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
• 占有原先的位置（相对定位的特点）
• 必须添加top / left / right /bottom 其中一个才有效

不常用，兼容性差，IE不支持。 

1.7 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

语法：选择器：{ z-index: 1; }

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有x-index属性

总结：