H5逆战班position定位学习

position定位
position定位
概念：某一元素相对于元素本身，或者相对于另外一个元素或者是浏览器窗口所在的位置，按照相对位置的不同，具体分为相对定位，绝对定位和固定定位。
Position的属性及属性值
Static：静态定位，元素初始默认的位置
Relative：相对定位，元素相对于自身默认位置的所发生偏移的距离，原自身所占的空间会被保留，不会影响其他盒子位置。

Absolute：绝对定位。
第一种情况：若只是给元素添加absolute，没有定位父元素，那位置是相对于浏览器窗口的定位，并且该元素会脱离文档流，同时影响下面元素的位置，对前面标准流元素无影响。

第二种情况：如果有定位父元素，相对于父元素发生的偏移距离，元素本身会脱离文档流，从而会影响到后面元素的位置，对前面标准流元素没有影响，此时给元素添加absolute时，一定要找父元素添加relative。如果父元素中有多个元素具备定位模式，那么此元素的相对于离自身最近的父元素的位置发生偏移的。


Fixed：固定定位，可以理解为特殊的绝对定位，只不过元素是相对于浏览器可视窗口的位置，不会受到浏览器滚动条的影响，也不会受到父元素的影响。
举例说明：

Sticky：粘性定位
在没有达到指定位置的时候，是没有定位效果的，到达指定位置后，就变成固定模式。


定位偏移量是指top bottom left right ，不能单独使用，必须配合定位模式，单位可以是像素px，也可以用百分比%。
Z-index定位层级：默认的值为0，设置值可以为正数也可为负数，前提是只有设置定位模式才会起作用，主要解决嵌套时候层级的问题，比较的时候会先跟同级别的先比较。