position定位有哪几种？各有什么特点？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【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）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~