css定位的几种方式

定位经常会用到，但需要了解它的特性才能针对性的运用，为此总结一篇关于定位的博客
position属性值有static | relative | absolute | fixed
默认值：static
static：
无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：
对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute：
对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：
对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行相对定位，当出现滚动条时，对象不会随着滚动。
关于文档流:用大白话说，占据文档流就是页面中元素占据的位置。脱离文档流是不占据任何位置，不会对其它任何元素造成影响。

绝对定位(absolute)和相对定位(relative)的区别
1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
其实就绝对定位需要理解一下，因为它就定位需要参考父级，所以一般绝对定位时，会在父级加上相对定位(relative)，这样绝对定位(absolute)的父级就好找了，如果没有加relative，absolute的父级就会一直往上找父级元素，直到static

黑色相当于窗口static,蓝色就是黄色absolute的父级，会相对于蓝色定位，而不会相对于红色定位，如果没有蓝色没有设置relative，那黄色absolute的父级就是红色的relative，黄色absolute就会相对于红色定位，如果红色和蓝色都没有设置relative，那黄色absolute的父级就是窗口