CSS定位方式

CSS定位方式
CSS中关于定位的属性：position
其中position包含的属性值主要有五种：static/relative/absolute/fixed/sticky

一：static静态定位
static是position的默认定位方式，当你省略position属性，游览器会默认定位方式为static。
游览器会按照正常的页面流来放置，也就是按照正常的源码顺序放置区块，其中每个区块会单独占据占据一块区域，不会发生重叠。
二：relative相对定位
relative定位参照物为自身，即参照自身做位置的偏移，它需要借助left/right/top/bottom四个属性来指定偏移的位置。

当元素设置相对定位relative后，它的区块在页面上的显示位置会发生偏移，可能完全远离自身的先前位置，但游览器还会替它保留原先的位置，不会发生后边的区块替补的情况。
举例来说就像是教室中一人一桌，但下课时间，学生出去解决生理或心理问题不在座位上，也不会有其他学生占据原本属于他的位置。
因此，相对定位并不会影响整个文本流的顺序。

三：absolute绝对定位
拥有absolute定位的元素的参照物为必须有父元素，且父元素必须具有除static之外的定位，否则absolute定位参照物将会变为整个网页。
与relative相对定位相同的是它也需要借助left/right/top/bottom四个属性来指定偏移的位置。

当元素设置absolute绝对定位后，它的位置将会参照父元素产生，脱离原先的文本顺序，在页面中一个新的地方显示。游览器将会安排后边的区块进行替补。
参照之前的举例，相对定位指的是学生暂时离开自己的座位，位置依旧会属于他。而现在班主任需要按照成绩排名重新排座，他让先前的那名同学搬去教室里的第三列第四排，此时，第三列第四排的参照物就是整个教室，而当该名同学搬离他的位置之后，原本属于他的座位将不会为他保留，而是会安排给新的同学。
因此，绝对定位的元素会脱离文档流，不占据原本的位置。

四：fixed固定定位
fixed固定定位以游览器窗口做参照，他会占据窗口的一部分，脱离整个文档流，不随页面滚动而发生上移下移。
搭配left/right/top/bottom四个属性使用，代表定位在页面窗口的某个位置，以后将始终处于该位置。

固定定位fixed相当于教室内固定安装的投影设备，不论教室内学生如何变换位置，投影设备始终占据一个教室上方的固定位置。
也就是说，fixed固定定位的元素会脱离文档流，不占据页面位置，且始终不发生位置变化。

五：sticky黏性定位
sticky定位是fixed与relative两种定位方式的合并。
其功能为：当sticky定位的位置没有超出游览器窗口的范围，按照relative执行，当随着页面滚动，定位元素的位置即将超出游览器窗口时，则会改为按照fixed执行，将该定位元素固定在页面顶部或底部。
例如购物网页的搜索栏

当滚动条向下翻滚，搜索条即将滑出显示窗口时，它就会固定在窗口顶部，而当搜索条还在页面中时，则会随着滚动条翻滚而上下移动。
sticky定位必须搭配left/right/top/bottom四个属性，否则将等同于relative。