css定位笔记总结

css position属性有五种定位方式（static , relative , absolute , fixed , sticky）

定位方式	在文档流	会产生堆叠	设置top等属性
static	是	否	不需要
relative	是	是	需要
absolute	否	是	需要
fixed	否	是	需要
sticky		是	需要

接下来逐一进行总结

• static 默认的定位方式

static是position属性的默认值，如果在样式中不设置position，那么默认就是static。这时候浏览器会按照代码中的顺序，决定每个元素的位置，也就是默认的文档流。（设置top等属性不会生效）

• relative 相对定位

relative是按照该元素默认文档流为位置进行定位，这个时候需要设置top，bottom，left或者right等属性来偏移元素。

元素之间可能会出现重叠，relative定位虽然以元素默认的位置进行偏移，但是还是会占用文档流的位置。

• absolute 绝对定位

绝对定位是相对于上级元素进行定位（也就是父级元素），需要通过top，bottom，right，left等属性进行设置。

父级元素不能是static定位，如果是static，就会按照整个文档的html根元素进行定位。

另外absolute不占用文档流，会被正常页面流所忽视。

• fixed 固定定位

固定定位是相对于浏览器窗口进行的定位，需要通过top，bottom，right，left等属性进行设置。表现出来就是该元素不随着网页的滚动而滚动，就像是固定在某个位置。

• sticky 粘性定位

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

文章参考 ：阮一峰老师的 css定位详解  https://www.ruanyifeng.com/blog/2019/11/css-position.html

                  菜鸟教程 css Position定位 https://www.runoob.com/css/css-positioning.html