1.静态定位（仅作了解）
等于无定位，偏移属性无用，基本用不到该定位，。
2.相对定位 relative（重要）
定位方式不会修改浮动方式，所以其本质仍然是标准流，即占有当前位置，不会浮起脱标。
相对定位既不是按照父块的位置定位，也不是按照浏览器的位置定位，而是按照自己原本的位置进行定位，即以在标准流下的位置为基准进行偏移。
图解
3.绝对定位 absolute（重要）
图解
如果祖先元素没有定位：
如果祖先元素有定位：
则按照最近一级的带有定位的祖先元素为准，即 父亲 -> 爷爷 -> ······ -> body -> document（浏览器）的顺序。
绝对定位会脱标
设置绝对定位后，元素会像浮动一样浮起，不占有原位置，但仍限制在父元素盒子内，此时可以随意的在父盒子中移动，是非常好用的定位方式。
让绝对定位的盒子居中（常见）
这个用法也经常见，让一个绝对定位的盒子始终处于浏览器的居中部分（垂直居中/水平居中），这样即使浏览器缩放了，比例位置也不会改变。比如我之前写简历的时候就希望那个框框不要随着缩放乱动，就可以使用绝对定位。
垂直居中
只需要一点小算法：先让绝对盒子移动浏览器窗口的一半距离，然后再用margin往回移动自己宽度的一半即可。
水平居中
原理相同，只需要将left改为top，margin-left改为margin-top即可。
4.固定定位 fixed（重要）
固定定位其实和以浏览器为基准的绝对定位相似，不占有原位置，可以随意移动。但是，固定定位是始终以可视窗口为准，与父元素无关，并且不随滚动条滚动的，可以说是真正字面意义上的绝对定位。
示例：
像米哈游官网右上角的语言切换 CH/EN 就是固定定位，会始终固定在可视窗口的右上角。
固定定位小技巧
有时我们希望盒子可以以版心为中心进行定位，比如让一个 Top回到顶端 始终靠着版心的右侧位置，此时我们就可以用一点简单的算法来实现：
5.粘性定位 sticky（重要）
sticky：
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
也就是一个导航栏，在视图窗口内的时候 和一般常规流一样，但是一旦要将其滚动到视图外的时候，其位置就会固定在页面中，是很多购物页面常见的样式。
6.定位层叠次序z-index
- 仅当设置了position属性且其值为非static时，其层叠级别才能通过z-index属性定义。z-index的值越大，则层叠级别越高，将处于其他级别低的样式上面。
- 其实z-index就代表Z轴，也就是电脑屏幕到我们眼睛的这条轴，数值越大离我们越近，所以层叠位置也越靠上
若有收获，就点个赞吧
0 人点赞
