CSS position详解。还不会用定位？看完你就懂了。
CSS中定位常用来：
1.正常情况下可以覆盖在另一个元素上
2.可以移动一个元素的位置
3.可以固定某个容器在浏览器窗口的某个位置不动
4.可以做吸顶效果
CSS定位方式共有五种：
- position: static;静态（默认）定位
- position:relative;相对定位
- position:absolute;绝对定位
- position:fixed;固定定位
- position:sticky;粘性定位
static 默认值
relative 相对定位
1.文档流
不脱离文档流 仍然占据浏览器位置
2.参照物
相对于初始位置，移动位置之后原来的空间还在。
3.层叠顺序
多个元素给了相对定位之后，如果没有移动位置，他们就不会覆盖，如果移动 了后面的会覆盖前面的 ，可以用z-index改变。
在box中添加一个子容器box2
给子容器添加相对定位
position: relative;
top: 50px;
left: 50px;
可以看出box2相对于原来的位置的左边和上边都是50px；
absolute 绝对定位
1.文档流
脱离文档流
下面的元素如果没有定位则会上去，文字也会被覆盖（全脱离）
浮动也是脱离文档流，但是下面容器的文字环绕显示（半脱离）
如果多个元素给了绝对定位，结构顺序靠后的在上面
2.移动参照物
定位之后想要移动位置，可以用margin 或者left right bottom top
参照物是浏览器
如果父容器有定位，则参照物是父容器
3.层叠顺序
z-index属性 默认是0 改变定位之后的层叠顺序
在box中添加一个子容器box2
直接给子容器添加绝对定位后
position: absolute;
top: 50px;
right: 50px;
由于box2的没有父容器有定位，因此参照物变为浏览器窗口，可以看到现在box2距离窗口右侧50px，顶部50px;
再给父容器添加定位后
position: relative;
此时的bo2x父容器有了定位方式因此box2相对于父容器定位，定位在了距离父容器右边和上面50px的位置
fixed 固定定位
1.文档流
脱离文档流 但是会固定在某一位置不动
多个元素同时给定了固定定位，结构上后面的元素会盖在最上面
2.top left right bottom
参照物是浏览器的当前窗口
3.层叠顺序
固定定位的层叠顺序也可以用z-index改变
在box中添加一个子容器box2
给子容器添加固定定位
position: fixed;
top: 50px;
right: 50px;
此时无论是否父容器有定位方式，box2都会相对于窗口定位，因此他定位到了距离浏览器右侧和上面50px的位置
此时我们将滚动条向下拉
画面整体上移，box2仍保持相对于窗口不动
sticky 粘性定位 CSS3新属性
1.文档流
脱离文档流 最开始是固定在一个位置不动相当于绝对定位
当到了给定的位置之后变成固定定位
2.参照物
浏览器的当前窗口
3.层叠顺序
多个元素同时给定了粘性定位，结构上后面的元素会盖在最上面
粘性定位的层叠顺序也可以用z-index改变
在网页中添加一个子容器box2
给box2添加粘性定位
position: sticky;
top: 50px;
此时看上去box2没有发生任何变化
滑动滚动条
滑动滚动条，刚开始box2会跟着网页一起上移，当box2到指定位置之后就会相对于浏览器窗口固定
如果给box2添加父容器 虽会触发绝对定位，但是box2无法脱离父容器
继续往下滑动，父容器由于没有定位，会上移，同时也会把box2带上去
总结：
当遇到单独修改一个元素的位置并且使其他元素不受其移动影响的时候使用相对定位。
当遇到使某个元素在一个区域里浮动在其他元素上面使用绝对定位。
绝对定位和相对定位的区别是绝对定位可以脱离文档，不占据文档位置，相对定位虽然可以盖在其他元素上面，但是在其原位置仍然会占据空间。
当需要一个元素无论何时都固定在窗口的一个位置的时候使用固定定位，比如提示框。
当遇到需要一个元素移动一定范围之后固定在窗口不动的情况使用粘性定位，比如某些顶部的吸顶效果，右边的回到顶部或者联系客服效果。
逆战班 SpongeBooob
浙公网安备 33010602011771号