CSS知识点 之 position布局
前段时间被同学怂恿，参加了百度前端技术学院的一个小培训，第一个阶段下来学到不少东西。课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训，给出的一些小任务虽然写起来不困难，但在写的过程中还是学到不少东西，查漏补缺。前端知识太丰富，很容易忽略一些小细节，自己也是倚着这个心态去学的，虽然写过网站，也写过app，不过这一程下来，通过里面给出的一些高水平的知识点的讲解，还是感觉很受用，现在分享出给大家伙看看，写的不好求放过，我第一次写东西，算是总结，也是回顾。
其中有不少东西，来自原帖，我会在下面给出链接。
使用position布局方式，可以分成三种，相对定位（也即position:relative）、绝对定位（postion:absolutefixed）、粘性定位(position:sticky)等等。
通常我们还会见到一个关键字 static，static 是元素默认使用的定位方式，也就是元素在文档中处于当前的布局位置，此时，top，left，right，bottom，以及z-index 属性不起作用。
这里有一小段代码可以演示一下：（浏览器里面查看比较直观，这个是atom直接预览，速度快，推荐这玩意写前端）
可以看看设置了left 和 top 前后的变化
设置之前
设置之后
可以看到没有发生任何变化！
相对定位:默认在原先的元素位置留下一个空白，元素相对的位置是元素原先默认的位置，说起来有点绕。
之间看下面的图，设置后结果看图，对比图1，很好理解了吧！
也就是，使用relative 定位方式，元素还是存在于文档流之中的，不会脱离文档，依旧会占据一个位置。
绝对定位：absolute 和 fixed；绝对定位方式被任务是，元素是脱离了文档流。这个可以理解为元素是固定死的，相同级别的元素之间不存在位置的影响。它只和父级元素之间存在瓜葛。
先看这张图
元素2设置了绝对定位absolute,此时使用left，top，等属性的时候，元素相对的不再是元素默认的位置（也就是图1中元素2的位置），而是相对于section（最近的定位祖先元素）的位置定位了。而且，元素2将元素1盖住了。
而fixed 方式的固定定位和absolute相似。不同的是，fixed 以后，元素固定的位置不再是相对于文档流中的父级元素，而是相对于浏览器窗口！
在CSS3中新增了如下几种定位方式
center：
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。
page：
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。
sticky：
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。这玩意慎用。
原文地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position