CSS---定位基础篇
- CSS-----基础定位:
- 一 、 学习定位原因：（定位的作用）
- 二 、定位组成：
- 2.1 四种定位模式：
- （1）静态定位（了解）：
- （2）相对定位relative：
- （3）绝对定位 absoluete：（重要）
- 子绝父相（非常重要）
- （4）固定定位 fixed：重要
- 固定定位小技巧---紧贴版心
- （5）粘性定位sticky:（了解，不是很常用）
- 2.2边偏移：
- 2.3 定位总结：
- 2.4 定位叠放次序：
CSS-----基础定位:
模块目标
一 、 学习定位原因：（定位的作用）
（1）某元素可以在一个盒子内移动，并压在其他盒子之上
（2）有些元素固定在网页中某位置
通过标准流和浮动无法实现
二 、定位组成：
将盒子定在某一位置（也是摆放盒子，但是可以定在任意位置）
定位=定位模式（定位方式）+边偏移（决定元素最终位置）
2.1 四种定位模式：
css中position属性来设置
（1）静态定位（了解）：
是元素默认的定位方式，相当于无定位
按照标准流的特性摆放位置，没有边便宜（和标准流一样）
（2）相对定位relative：
特点：
1 相对于原来自己的位置移动：必须在css中声明定位模式和边偏移
2 移动的位置是相对于原来的位置(自恋型)；原来在标准流的位置继续占有，不脱标，继续保留原来的位置
3 给绝对定位当爹（限制绝对定位）
position:relative ；
top:npx;
left:mpx;
（3）绝对定位 absoluete：（重要）
绝对定位是相对于祖先元素（父元素）来移动
position:absolute;
特点：
1 如果（1）没有父元素/（2）父元素没有定位，就都以浏览器为基准进行移动
2 如果有多个祖先元素（有爹有爷）：以距离最近一级有定位的祖先元素为参考来移动（如果父亲没有定位而爷爷元素有定位，就以爷爷元素为基准进行移动）
3 绝对定位不占原来的位置（脱离标准流，会飘起来）
子绝父相（非常重要）
子级使用绝对定位，父级就需要用相对定位！！！
子绝：子级元素使用绝对定位，不会占有原来的位置，可以放在父盒子的任意位置，并且不会影响其他的盒子
父相：父亲要有定位（相对定位，要占有位置），子级才能以父级元素为基准进行移动
因此相对定位给场用左绝对定位的父级
但不绝对，如果父元素不需要占有位置，子绝父绝也有可能
（4）固定定位 fixed：重要
作用：固定到浏览器可视区的某个位置，即使滚动浏览器页面元素的位置也不会改变
语法：
position:fixed；
特点：
1 以浏览器的可视窗口为基准进行移动
2 固定定位不占有原来的位置（脱标，可以认为是一种特殊的绝对定位）
固定定位小技巧—紧贴版心
小算法：
（1）先使用绝对定位向右移动（left:50%;)到网页平分线上
（2）固定定位的盒子margin-left：再向右移动版心盒子宽度一半的距离
（5）粘性定位sticky:（了解，不是很常用）
poistion:sticky;
特点：
1 以浏览器可视窗口为参照点移动
2 占有原来的位置（相对定位的特点）
3 边便宜必须添加上/下/左/右中的一个才有效
2.2边偏移：
就是盒子移动到最终位置，
有top（距离顶部）
bottom（下）
left（距离网页右边）
right四个属性
2.3 定位总结：
2.4 定位叠放次序：
z-index属性:z表示z轴，决定谁在上谁在下
语法：
1 数值可正可负可0，数值越大越靠上
2 如果属性值相同，按照代码顺序（解析顺序），后来者居于顶部
3 只有定位的盒子才有z-index属性
