这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【position定位有哪几种？各有什么特点？】
【修真院CSS小课堂】
position定位有哪几种？各有什么特点？
开场语：
大家好，我是IT修真院上海分院第10期的学员林璇，今天给大家分享一下，修真院CSS任务四
position定位有哪几种？各有什么特点？
（1）背景介绍：
定位分为三种
相对定位
让元素让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
相对定位不脱标:老家留坑，别人不会把它的位置挤走。
就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
绝对定位
定义横纵坐标。原点在父容器的左上角或左下角。
绝对定位脱标，绝对定位的盒子脱离了标准文档流。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
固定定位
是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
（2）知识剖析：
相对定位
有什么作用？
相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个div放到另一个div之上）
做绝对定位的参考，子绝父相
绝对定位
一个绝对定位的元素，如果父辈元素中也出现了已定位
无论是绝对定位、相对定位，还是固定定位）的元素
那么将以父辈这个元素，为参考点。
子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。
固定定位
顶部导航
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做
（3）常见问题：
有的时候为什么会出现透明的情况呢？
（4）解决方案：
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
（5）编码实战：
z-index：1；如果说在运用种，有1和2 的情况，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
（6）拓展思考：
让绝对定位中的盒子居中
我们知道，如果想让一个标准流中的盒子居中（水平方向看）
可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中，可以这样做
left:50%; margin-left:负的宽度的一半
（7）参考文献：
1：生命壹号博客
2：B站视频：盒子模型
（8）更多讨论：
1：问题：Fixed 定位在 IE7 和 IE8 下需要描述什么才会支持呢？
回答：1.!DOCTYPE 才能支持。
2：问题：2.absolute 定位的元素和其他元素重叠吗？
回答：2.会重叠的
3：问题：relative在没有设置宽度的情况下，宽度是多少呢？
回答：3.宽度是整个浏览器的宽度。
（9）鸣谢：
感谢王刚师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地