css的position(定位)样式

一、定位的作用

• 改变元素的位置
• 让元素重叠放置任意位置
• 让元素固定在窗口固定位置

二、定位的种类

1. 相对定位

   • 未脱离普通流
   • 元素本身在普通流中的位置没有发生变化，只是视觉上的变化
   • 注意和margin、负margin的区别，margin的偏移会使元素的普通流位置发生改变。

2. 绝对定位

   • 一定要有参考点，一般需要给父亲设置position: relative; 对父亲没影响，但是可以作为自己的参考点。
   • 会完全脱离普通流，其他元素（包括父元素）无法发现绝对定位元素的存在，会出现相互覆盖的情况。
   • left: 10px; 是自己的外边距相对于参考元素的边框内壁偏移10px。
   • 如果不设置left/top，或者设为auto，则绝对定位元素的位置处于默认位置。
   • 绝对定位元素的宽度是收缩的，一般需要设置固定宽度。
   • 给行内元素设置绝对定位后就有了块级特性，可以设置宽高。

3. 固定定位

   • 相对于浏览器窗口
   • 一定要设置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值，直到标签；
  ③ 该值会使元素脱离文档流。
  ④ 使用该值可以用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