css中的定位详解

语法：

选择器｛ position : static ;}

• 静态定位按照标准流特性放位置，它没有边偏移。

• 静态定位在布局时很少用到。

🍊相对定位 relative （重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：

选择器｛ position : relative ;}

相对定位的特点：

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

🍊绝对定位 absolute （重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

选择器｛ position : absolute ;}

绝对定位的特点：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（ Document 文档）。

• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

• 绝对定位不再占有原先的位置。（脱标）

上述代码中红色盒子没有父元素，则以浏览器为准定位（ Document 文档）且不再占有原先的位置，绿色盒子就移上去了。

🍒绝对定位小技巧：绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin :0 auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

1. left :50%;：让盒子的左侧移动到父级元素的水平中心位置。

2. margin - left :-…px,：让盒子向左移动自身宽度的一半。

🍊固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器｛ position : fixed ;}

固定定位的特点：

• 以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系。

• 不随滚动条滚动。

• 固定定位不在占有原先的位置。

• 固定定位也是脱标的，其固定定位也可以看做是一种特殊的绝对定位。

可以看到无论滚动条怎么滑动，红色盒子都不会动。

🍒固定定位小技巧：固定在版心右侧位置。

小算法：

1．让固定定位的盒子 left :50%．走到浏览器可视区的一半位置。

2．让固定定位的盒子 margin - left ：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

🍊粘性定位 sticky （了解）

粘性定位可以被认为是相对定位和固定定位的混合。

sticky 粘性的语法：

选择器｛ position : sticky ; top :10px;}

粘性定位的特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）。

• 粘性定位占有原先的位置（相对定位特点）。

• 必须添加 top 、 left 、 right 、 bottom 其中一个才有效跟页面滚动搭配使用。

• 兼容性较差， IE 不支持。

通俗的说，他的效果就是一个盒子随滚动条滑动一段距离就固定。因为不常用，这种效果一般用js实现，这里了解就行。

🍋“子绝父相”的由来

---

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式。

这句话的意思是：子级是绝对定位的话，父级要用相对定位。（回到前面看一看绝对定位的特点就明白了为什么要用“子绝父相了”）

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

• 父盒子需要加定位限制子盒子在父盒子内显示。

• 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，当然，子绝父相不是永远的，如果父元素不需要占有位置，子绝父绝也会遇到。

🍋定位的总结

---

| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-4xTVD5ff-1712870874187)]

[外链图片转存中…(img-BZIpnsYf-1712870874187)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-ksbkWWrX-1712870874188)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！

[外链图片转存中…(img-7tdf3OGC-1712870874188)]

[外链图片转存中…(img-c9j56gTO-1712870874188)]