【九月打卡】第1天 三种定位的总结

一、课程概述

1、学习课程名称：前端工程师2022版

2、章节名称：CSS3浮动与定位第三章

3、讲师名称：一阶段老师

4、课程内容：CSS3相对定位、绝对定位和固定定位的概念、使用方法作用等

二、内容分享

我们近期学习了相对定位、绝对定位、固定定位，他们都有 top、bottom、left 和 right 四个位置描述词，值可以为正数，也可以为负数，即往规定方向的相反移动
1、相对定位（relative）：相对定位就是盒子相对于自己原来的位置来进行位置上的调整。
（1）是否脱离文档流：否，相对定位元素虽然表面上移动了，但本质上仍然是在原来的位置上的
（2）使用相对定位：设置position:relative;后，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位，如果不设置偏移量，元素不会发生任何变化
（3）定位参考：盒子自己原来的位置
（4）作用：用来微调元素位置，可以做绝对定位的参考盒子
（5）应用： 相对定位一般情况下都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

2、绝对定位（absolute）：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
（1）是否脱离文档流：绝对定位脱离标准文档流，意味着它将释放自己的位置，就好像从来不存在一样，它不会对其它元素产生任何干扰影响，但是在显示上它会压盖住其他标签
（2）使用绝对定位：1）必须给父元素增加定位属性，一般建议使用position:relative；2）给子元素加绝对定位position:absolute; ，同时要加方向属性（指left、right、top、bottom属性）
（3）定位参考：如果盒子设置了祖先元素就以祖先元素为定位参考，如果没有设置祖先元素，那么就还是以浏览器页面为定位参考
（4）作用：1）用来制作“压盖”、“遮罩”效果；2）可以结合CSS精灵来使用；3）可以结合JS实现动画
（5）应用：制作轮播图、下拉菜单、弹出数字气泡、特别花边等

3、固定定位（fixed）：不管页面如何卷动，它都会以浏览器为定位参考，永远固定在一个位置上
（1）是否脱离标准文档流：是
（2）使用固定定位：设置position:fixed;后，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位，没有子固父相
（3）定位参考：浏览器可视窗口
（4）作用/应用：用于返回顶部、楼层导航、页面两边的固定广告

三、学习完毕打卡截图√