Css.position（static,sticky,fixed,relative,absolute）

如果html中的元素想跳出html排版，就需要用position属性

position取值：static,sticky,fixed,relative,absolute

结合使用的属性：top，left，bottom，right 取回 1px

简单区分

static ：默认，就是普通的标签

sticky：有滚动条的时候，会粘到顶部或者底部

fixed：固定位置，滚动条怎么搞也没用

relative：在修饰标签的位置为参考系，使用top，left控制

absolute：按照屏幕作为参考系，使用top，left，bottom，right控制

relative和absolute嵌套，就在父类元素 作为参考系

详解fixed

固定位置，滚动条对他没用，固定在屏幕特定位置

详解sticky 

向上或者向下滚动时，会粘到最上面或者最下面，可以感受一下：菜鸟教程在线编辑器

详解relative

位置参考作为的html位置开始算

嵌套：还是按照上一个html元素为原点来移动

详解absolute

按照屏幕来定位

 如果top和bottom冲突，right和left冲突，按照top和left实现

 嵌套：内层就按照外层容器为边界开始计算，最外层按照屏幕为坐标系

relative中嵌套absolute

1.红色：relative 按照html位置开始

2.中间的absolute蓝色方块，按照外层红色方块开始算

absolute中嵌套relative

1. 外层absolute还是按照屏幕
2. 内层relative是按照外层absolute来计算

附录

1. 如果你听得惯粤语，工具挺不错：https://www.bilibili.com/video/BV1iE411W7ug?spm_id_from=333.337.search-card.all.click

2. CSS Position(定位) | 菜鸟教程

3. 推荐工具：codepen，可以很方便查看top的距离