CSS中定位

本篇文章主要叙述用css进行对元素在页面内的定位功能，同时定位也是唔明在编写网页时常用的功能之一。

在此之前定位，是需要通过设置定位属性：position，该属性作用是检索或者设置元素的定位方式，改变元素位置的属性。

CSS定位主要有，静态定位，绝对定位，相对定位，固定定位，黏性定位。

1）static 静态定位

作为position的默认值，不会改变文本流的状态，也不会被left right top bottom指定而发生位置变化。

2）relative 相对定位

相对定位后该元素始终占据空间
如果想为元素设置层模型中的相对定位，需要设置先设置position:relative;
将自身作为一个参照物，而后通过left right top bottom来相对于之前的位置变化。
比如我们想要让一个div元素相对当前位置左移100px，上移200px。

代码及效果图如下


由于定位的元素始终占用原有的空间，所以当元素在当前位置左移100px，上移200px后，叠加在蓝色div上，而蓝色div无法占据上方空间。

3）absolute 绝对定位

与相对定位不同的是，绝对定位，须先设置一个参照物，一般以设置在父元素上，且定位后脱离文档流，不占据空间。
如果想为元素设置层模型中的相对定位，需要设置先设置position:absolute;
以及在该元素的父元素上设置position:relative，以父元素作为参照物而后然后使用left、right、top、bottom属性进行定位，假设当前父元素没有定位或者没有父元素，则以整个文档作为参照物。

效果如下

可以看出，由于红色div完成定位后不占据空间，蓝色div顶替了原本红色div的位置。

4）fixed 固定定位

属性：position :fixed
直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非改变浏览器显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
设置属性：position :fixed;
通过left、right、top、bottom属性来控制。

5）fixed 黏性定位

属性：position:sticky
是相对定位和固定定位的结合
当设置的页面没有超过窗口范围，便会按照relative来执行，如超出窗口位置，按照fixed执行。

拓展

通过定位让元素在父元素里上下左右居中
position:absolute;
left:0;right:0;
top:0;bottom:0;
margin:auto;