实现代码：relative-练习-01
实现代码：relative-练习-02
static - 静态定位
-
static 是 position 属性的默认值
-
元素按照 normal flow 布局（没有脱标）
-
left 、right、top、bottom 没有任何作用
示例代码：relative
fixed - 固定定位
-
元素脱离 normal flow（脱离标准流、脱标）
-
可以通过left、right、top、bottom进行定位
定位参照对象是 视口(viewport)
- 当画布滚动时，固定不动
示例代码：fixed
画布 (Canvas) 和视口 (Viewport)
视口 (Viewport)
-
文档的可视区域
-
如右图红框所示
画布 (Canvas)
-
用于渲染文档的区域
-
文档内容超出视口范围，可以通过滚动查看
宽高对比：画布 >= 视口
脱标元素的特点
-
可以随意设置宽高
-
宽高默认由内容决定
-
不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级、行内级，块级、行内级的很多特性都会消失
-
不再给父元素汇报宽高数据
-
脱标元素内部默认还是按照标准流布局
示例代码：脱标元素_01、脱标元素_02
实现代码：fixed-练习
absolute - 绝对定位
-
元素脱离 normal flow（脱离标准流、脱标）
-
可以通过 left、right、top、bottom 进行定位
定位参照对象是最邻近的定位祖先元素；
如果找不到这样的祖先元素，参照对象是视口
定位元素 (positioned element)：position 不为 static 的元素，即 position 值为 relative、absolute、fixed 的元素
示例代码：absolute、absolute_技巧
子绝父相
在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置
position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置 position: absolute
- 简称为 “子绝父相”
示例代码：子绝父相
练习 - 蒙版
实现代码：absolute练习
绝对定位技巧
绝对定位元素 (absolutely positioned element)
position值为 absolute 或者 fixed 的元素
对于绝对定位元素来说：
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
最后
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。
做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
信够你学一阵子了。
做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
