6. 固定定位
6.1 概述&入门案例
固定定位：通过设置边偏移，将元素固定在页面某一位置。
注意：
1、固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动）
2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。（绝对定位做不到）
语法：
选择器 {
position : fixed ;
}
准备代码
代码实现及效果：
小结：
固定定位不会影响标准流（也不影响浮动）布局，在页面固定，哪怕拖动滚动条也一样。
6.2 进阶案例 1：父子关系中的固定定位
小结：
固定定位的边偏移，是以页面左上角为起点，不受父元素约束
6.3 总结
1 、 固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动）
2 、 固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。（绝对定位做不到）
3 、固定定位的边偏移，是以页面 左上角 为起点，不受父元素约束
7. 定位总结
1、定位总结：
3、边偏移和 margin 区别：
边偏移：
① 仅用于定位（
static 不可用，浮动不可用）
② 仅改变定位（相对、绝对、固定）元素的展示位置margin：
①所有状态的盒子均可用
②不仅改变展示位置。
若为标准流、相对定位、浮动，还会扩大其在标准流或浮动中占用的位置。
8. 定位-周边知识
8.1 叠放次序:z-index
因为定位中，后来定位元素会覆盖其他定位元素，导致效果不可控
所以为了定位展示效果的可控，CSS 提供了定位元素-自定义叠放次序的设置。
叠放次序：用于给定位元素设置展示效果的优先级。
注意：1、优先级越高，定位元素就越不容易被其他定位元素覆盖
2、默认的叠放次序为 auto。可以理解为 0
格式: z-index: 整数值;
准备代码：
示例代码及效果：
小结：
1、 通过为定位元素设置 z-index，可以调整定位元素优先级
2、 仅定位元素才可以设置 z-index，标准流和浮动设置无效
8.2 定位子元素-水平垂直居中
8.2.1 引言&概念
有时我们存在需要让子元素在父元素中 水平居中的需求，若使用标准流或浮动，我们可以通过设
置
margin:0 auto; 来解决。
但无法解决垂直居中问题，只能不断设置 margin 来解决，不但费时费事，而且无法动态改变。
所以 CSS 中，我们需要学习如何通过设置边偏移 +margin ，达到水平居中效果。
常见的 定位子元素-水平居中方式：
1、 动态居中设置
2、 手动居中设置
8.2.2 动态居中设置
语法格式：
选择器 {
width : 必须设置一个值;
height : 必须设置一个值;
position : absolute/fixed ;
top : 0 ;
bottom : 0 ;
left : 0 ;
right : 0 ;
margin : auto ;
}
注意：
子元素 - 设置： 绝对 定位，子元素在 父 内 水平垂直居中（如果父是 body ，相当于页面水平垂直居
中）
子元素 - 设置： 固定 定位，子元素在 页面 内 水平垂直居中
适用于：快速设置子元素的水平垂直居中效果。
8.2.3 手动居中设置
语法格式：
选择器 {
width : 必须设置一个值;
height : 必须设置一个值;
position : absolute/fixed ;
top:50 % ;
left:50 % ;
margin-top:-(宽度/2-边框) px ;
margin-left:-(高度/2-边框) px ;
}
注意：
子元素 - 设置： 绝对 定位，子元素在 父 内 水平垂直居中（如果父是 body ，相当于页面水平垂直居中）
子元素 - 设置： 固定 定位，子元素在 页面 内 水平垂直居中
适用于：手动自定义设置子元素的水平垂直居中效果。
建议使用：动态居中设置。
