css的position(定位)样式
一、定位的作用
- 改变元素的位置
- 让元素重叠放置任意位置
- 让元素固定在窗口固定位置
二、定位的种类
-
相对定位
- 未脱离普通流
- 元素本身在普通流中的位置没有发生变化，只是视觉上的变化
- 注意和margin、负margin的区别，margin的偏移会使元素的普通流位置发生改变。
-
绝对定位
- 一定要有参考点，一般需要给父亲设置position: relative; 对父亲没影响，但是可以作为自己的参考点。
- 会完全脱离普通流，其他元素（包括父元素）无法发现绝对定位元素的存在，会出现相互覆盖的情况。
- left: 10px; 是自己的外边距相对于参考元素的边框内壁偏移10px。
- 如果不设置left/top，或者设为auto，则绝对定位元素的位置处于默认位置。
- 绝对定位元素的宽度是收缩的，一般需要设置固定宽度。
- 给行内元素设置绝对定位后就有了块级特性，可以设置宽高。
-
固定定位
- 相对于浏览器窗口
- 一定要设置top/bottom，否则可能会出现无法展示的情况
三、position的值
1. static:默认值，表示没有定位，有时候也可以覆盖去掉定位样式，恢复原状。
2. relative定位
-
解析：
① 轻微偏移，采用相对定位的样式。
② 相对于元素原本的位置进行定位，不会使元素脱离文档流，
③ 使用该值可以用left，right，top，bottom对元素进行移动定位。
④ relative和margin不同点是：relative文档流没有改变，位置没有改变，margin文档流会改变，会影响前后元素的位置。相同：2者都可以有负值 -
范例：验证relative的定位方式及其是否处于文档流中的位置。
①验证其定位方式，如下图所示，因为relative是相对于默认位置（即static位置）进行偏移，所以不需要添加absolute / relative / fixed
relative默认的位置
relative定位是相对于自己默认位置进行偏移
②验证其是否还处于文档流中原本的位置，如图所示，a元素相对定位后，b元素没有因为a元素从本来的位置移开上移，证明a元素真正位置依旧是原本所占的位置，只是视觉移动。
文档流原本位置
b元素没有因为a元素的移动改变位置，证明a元素只是视觉移动而已，文档流的位置没有改变
3. absolute定位
-
解析
① 表示采用绝对定位方式；
② 参照position值不是static的父容器，如果采用absolute的元素直接父容器position值是static，那么会查询更上一层的父容器的position值，直到<html>标签；
③ 该值会使元素脱离文档流。
④ 使用该值可以用left，right，top，bottom对元素进行移动定位。
父元素是relative定位，子元素是absolute定位，所以子元素定位是基于父元素的relative，相对于父元素的顶部向下偏移50px，如果父元素是static定位，子元素就是距离网页的顶部向下偏移50px
-
范例：验证absolute定位对文档流产生的影响，
最初的文档流位置
a元素采用absolute定位偏移后，b元素上移了，证明a元素已经不处于文档流中的位置了
4. fixed定位:
-
解析
①表示采用固定定位方式，
②相对于浏览器窗口进行定位，否则初始位置就是元素的默认位置，元素的位置在屏幕滚动式不会发生改变。
③会脱离文档流
④打印时，元素会出现每页的固定位置。
⑤使用该值可以用left，right，top，bottom对元素进行移动定位。
⑥适用需要固定在浏览器某位置的场景，如企业站窗口底部的联系我，某些固定在页面顶部的导航条 -
验证：小广告始终在你眼前
fixed定位
5. sticky定位
-
解析
①被认为是relative和fixed的混合，元素在跨越特定阈值钱为相对定位，之后为固定定位。②形成动态固定，比如，网页的搜索工具栏，初始加载时在自己的默认位置（
relative定位）页面向下滚动时，工具栏变为固定位置，始终停留在页面头部（fixed定位）。等到页面重新向上滚动回到原位，工具栏也会回到默认位置（relative定位）。③必须搭配
top、bottom、left、right属性一起使用，否则等同于relative定位，不会产生动态的效果。④ 当页面向下滚动时，被视窗顶部拦住，被父级块元素的下边缘推走。
⑤如果出现多个
sticky，放置在同一容器内，会出现下一个sticky元素把上一个覆盖的效果。
覆盖
⑥如果出现多个sticky，放置在并列的多个块级容器内，会出现下一个sticky元素把上一个推走的效果
推走
参考：
饥人谷课件
https://www.jianshu.com/p/0465b35ec1dd
https://ruanyifeng.com/blog/2019/11/css-position.html
