【css定位】超详细！手把手带你体验position属性（含sticky属性与效果图）

---

前言

面试官：说说position的属性吧。

我：哦，这个呀，relative，absolute。子绝父相，父元素设置relative，子元素设置absolute，就能相对父元素设置left等元素进行定位啦。

面试官：如果父组件不是relative，absolute相对于什么定位？

我：。。。

面试官：如果我在relative里面设置left等元素，它相对于什么定位？

我：。。。

面试官：absolute只能相对于relative定位？

我：。。。

面试官：sticky用过吗？

我：了解一点。

面试官：如果网页不兼容我该怎么实现它呢？

我：（已阵亡）

一、relative

1.介绍

相信大家postion最熟悉的之一就是relative了吧？子绝父相早已在我脑海里刻下了深刻的记忆。

官方介绍：生成相对定位的元素，相对于其正常位置进行定位。不会脱离文档流

通俗来说就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。

2.场景

相对自身定位

刚刚有提到如果只有relative，它会相对于什么定位呢。让我们来试试！

效果：
可以看到当我们设置left时，它相对与自身原本的位置进行了偏移

其实使用场景最多的就是子绝父相，在下面将会介绍此类情况。

二、absolute

1.介绍

来咯！大家熟得不能再熟的属性。

官方介绍：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。脱离文档流。

问题：

1. 相对于static定位以外的父元素定位，是其他所有都可以吗？包括父元素也是absolute？
2. 如果父元素都是static，那么它相对于谁定位？
3. 脱离文档流还会占位吗？

让我们带着这几个问题一起去探讨一下吧

2.场景

相对于除static外的父元素定位

父元素为relative：

可以看到是可以进行定位的

父元素为absolute：

可以看到我们也是可以进行定位的哦

父元素为fixed：

可以看到fixed也是可以的

父元素为sticky：

由上面看来发现都是可以进行对位的哦

父元素都是static相对于谁定位

父元素为static：
可以看到，如果父级元素为static时，它会相对于body进行定位

脱离文档流会占位吗

让我们来试试：
我们发现只要设置top等定位量，就不会占位哟。但如果没设置就和正常的一样，会占位

三、fixed

1.介绍

这个相信有不少的朋友都使用过，它一般相对与浏览器窗口进行定位，可放置导航菜单或音乐盒之类需要不断出现在页面的功能。

官方介绍：生成固定定位的元素，相对于浏览器窗口进行定位。

2.场景

这里可以看到我们的div根据浏览器定位到了我们想要的位置

四、sticky

1.介绍

粘性布局，和名字一样，它的功能就是为了让布局粘在某个位置不变。那么就有同学想问了，那直接使用fixed不就行了吗？sticky的功能可不光光是粘在某个位置不变哦

我们发现淘宝网站的这个搜索栏，刚开始处于正常的布局，在下拉到一定区域后，变成了吸顶。这就是我们sticky的功劳啦。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

2.场景

可以看到我们完成了吸顶效果哟。

注意！！！！！！

sticky只有在你设置的方向要超出可视区时，才会生效。比如我设置left：0，那么必须要拉出左可视区也就是dom与浏览器左边的距离小于0才会形成吸附效果！！！！

有同学会问了，如果浏览器不支持我也想要这个效果该怎么做呢？

这个部分在我的另一篇博客有详细说明和手撕代码部分哦，大家有兴趣可以去看看

总结

在了解完position后，是不是感觉自己又行了

“把面试官叫回来，我要和他再战！”