<!--
1.定位的概念:可以控制元素在浏览器中的位置
2.生活中的定位
- 把大象放进冰箱需要几步:打开冰箱、把大象放进去、关闭冰箱
- 把单辉掉在投影仪上听课:绑起来、掉上去、嘲笑他
3.关于定位使用的条件
- 需要移动修饰的对象
- 位置的移动方式
- 参照物
4.定位属性的使用 position
- static 静态定位(默认值)
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位(css新增的定位属性值,兼容差)
-->
相对定位属性使用
1.属性:position
2.属性值:relative
3.特点
- 设置相对定位的时候需要给元素设置方向值(top/right/bottom/left)
- 相对定位是相对于初始位置进行移动的
- 总结盒模型和定位属性之间的区别
- 相同点:可以控制元素在浏览器中进行移动
- 不同点:盒模型设置的时候需要有父级包含框的接触,定位不需要没有方向的限制
- 总结浮动和定位属性之间的区别
- 相同点:可以控制元素在浏览器中进行移动
- 不同点:浮动是脱离文档流的,相对定位是不脱离文档流的
4.相对定位作用:是工具人,是为了给绝对定位提供参照物的
绝对定位属性使用
1.属性:position
2.属性值:absolute
3.特点
- 绝对定位的参照物(父相子绝)
- 当父级有定位属性的时候,子级就会相对于父级进行偏移
- 当父级没有定位属性的时候,会往上级查找,直至找到浏览器
- 绝对定位是会脱离文档流的,不占位置会破坏正常的网页布局
拓展"流"的概念
1.普通流/普通层/文档流:正常的网页布局
2.浮动层/浮动流:在正常的网页上一层
3.定位层/定位流:在浮动上一层
固定定位属性使用
1.属性:position
2.属性值:fixed
3.特点
- 相对于浏览器的位置进行偏移的,是脱离文档流的
- 作用:广告弹窗、聊天窗口、登录注册
粘性定位属性使用
1.属性:position
2.属性值:sticky
3.特点
- 粘性定位是css中新增的属性值,兼容性比较差
- 粘性定位是结合了相对定位个固定定位的特点
- 相对定位:不脱离文档流
- 固定定位:相对于浏览器进行移动
-->
<!--
一:定位是可以控制元素在浏览器中移动位置
二:属性position
三:属性值及用法
1.相对定位:relative 是相对于初始位置、不会脱离文档流
2.绝对定位:absolute 是相对于父级(浏览器)进行移动、会脱离文档流
3.固定定位:fixed 是相对有浏览器进行移动、会脱离文档流
4.粘性定位:sticky 是相对于浏览器进行一定、不会脱离文档流
需求:页面中有三个盒子,考虑让三个盒子叠加在一起?三个盒子排列的顺序是怎样的?
解答:在定位中脱离文档流会出现在定位层,排列顺序的是从下到上,在后面的元素会显示在最上面
层叠属性:z-index(使用的前提条件一定需要在定位环境下使用)
属性值可以设置数字,数字越大越在上面显示
-->
1.已知元素宽高大小,设置元素在浏览器中间显示
2.未知元素宽高大小,设置元素在浏览器中间显示
拓展:CSS3中的计算属性
用法:calc(计算公式) 相加相减的时候需要空格