定位的认识
- 定位的概念：可以控制元素在浏览器中的位置
- 关于定位使用的条件
- 需要移动修饰的对象
- 位置的移动方式需要改变
- 参照物
- 定位属性的使用 position
- static 静态定位（默认值）
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位（css新增的定位属性值，兼容差）
相对定位属性
属性：position
属性指标：relative
-
特点：
- 设置相对定位的时候需要给元素设置移动方向值（top/right/bottom/left）
- 相对定位是相对于初始位置进行移动的
- 总结盒模型和定位属性之间的区别
- 相同点：可以控制元素在浏览器中进行移动
- 不同点：盒模型设置的时候需要有父级包含框的接触，定位不需要，没有方向的限制
- 总结浮动和定位属性之间的区别
- 相同点：可以控制元素在浏览器中进行移动
- 不同点：浮动是脱离文档流的，相对定位是不脱离文档流的
position: relative; left: 100px; 相对定位作用：是工具人，为了给绝对定位提供参照物的
绝对定位属性
属性：position
属性值：absolute
-
特点：
- 绝对定位的参照物（父相子绝）
- 当父级有定位属性的时候，子级就会相对于父级进行偏移
- 当父级没有定位属性的时候，会往上级查找，直到找到浏览器
- 绝对定位是会脱离文档流的，不占位置会破坏正常的网页布局（不建议在大布局中使用，会产生一些问题）
案例1：相对与绝对定位的使用
- 绝对定位的参照物（父相子绝）
拓展“流”的概念
- 普通流/普通层/文档流：正常的网页布局
- 浮动层/浮动流：在正常的网页上一层
- 定位层/定位流：在浮动上一层
固定定位属性
- 属性：position
- 属性值：fixed
- 特点
- 相对于浏览器的位置进行偏移的，是脱离文档流的
- 作用：广告弹窗、聊天窗口、登录注册
粘性定位属性
- 属性：position
- 属性值：sticky
- 特点：
- 粘性定位是css中新增的属性值，兼容性比较差
- 粘性定位是结合了相对定位个固定定位的特点
- 相对定位:不脱离文档流
- 固定定位:相对于浏览器进行移动
总结
一、定位是可以控制元素在浏览器中移动位置
二、属性positon
三、属性值及用法
- 相对定位：relative 是相对于初始位置，不会脱离文档流
- 绝对定位：absolute 是相对于父级（浏览器）进行移动，会脱离文档流
- 固定定位：fixed 是相对于浏览器进行移动，会脱离文档流
- 粘性定位：sticky 是相对于浏览器进行移动，不会脱离文档流
Q：页面中有三个盒子，考虑让三个盒子叠加在一起？三个盒子的排列顺序是怎么样的？
A：在定位中脱离文档流会出现在定位层，排列顺序是从下到上，在后面的元素会显示在最上面
层叠属性：z-index
（使用的前提条件是一定需要在定位环境下使用）
属性值可以设置数字，数值越大越在上面显示
定位实现居中方式
- 已知元素宽高大小，设置元素在浏览器中间显示
<div>
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
</div>
div{
width: 400px;
height: 300px;
border: 1px solid #000;
position: fixed;
left:50%;
margin-left: -200px;
top:50%;
margin-top: -150px;
}
p{
margin: 20px;
}
拓展：css3中的计算属性
用法：calc（计算公式）
注意：相加相减的时候需要空格
div{
width: 400px;
height: 300px;
border: 1px solid #000;
position: fixed;
/* left:50%; */
/* margin-left: -200px; */
left:calc(50% - 200px);
top:calc(50% - 150px);
/* top:50%; */
/* margin-top: -150px; */
}
- 未知元素宽高大小，设置元素在浏览器中间显示
/* 第二种方法：强制性居中显示 */
top:0;right: 0;left: 0;bottom: 0;
margin: auto;
锚点
锚点链接的使用：需要配合超链接使用控制在页面内的跳转
-
作用：
- 【重点】可以在同一个页面实现跳转（点击回到顶部）
- 【了解】可以在不同页面间实现跳转（电商页面布局）
-
用法
-
点击跳转：
<a href="#id属性值"></a> -
跳转链接：
<div id="id属性值"></div>
<a href="#home">点击回到顶部</a> <a href="16-detail.html#detail">点击跳转到另外一个页面部分</a>/* 设置浏览器滚动条滚动的速度 */ html,body{ scroll-behavior: smooth /* 平滑的/平缓的 */ } -
-
锚点使用的注意点
- 在浏览器的地址栏中默认会绑定id并且不可以刷新删除,需要手动
- 单击锚点的时候,锚点一定会让跳转的地方显示在最顶部
