# [position: static, relative, absolute 跟 fixed 的差別](https://www.ruanyifeng.com/blog/2019/11/css-position.html)
###### tags:`css`
==position: static;靜態位置==
* 浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。
* 每个块级元素占据自己的区块（block），元素与元素之间不产生重叠。
* 對top、bottom、left、right这四个属性无效。

==position: relative;相對位置==
* 相对于默认位置（即==static时的位置==）进行偏移，即定位基点是static。
* 搭配top、bottom、right、left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，
* relative定位的元素是"正常页面流"，即在"正常页面流"中偏移，==该元素有占空间==。
* 不會影響到其他元素所在的位置。

==position: absolute;絕對定位==
* 相对于==上级元素==（一般是父元素）进行偏移，即定位基点是父元素。
* 必须搭配top、bottom、left、right这四个属性一起使用。
* absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，==该元素所占空间为零==。
* 不會影響到其他元素所在的位置。
* 它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。

==position: fixed;固定位置==

* 相对于==视口==（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
* 这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。捲動卷軸時不會移動

==position: sticky;动态固定==
* 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（==fixed定位==）。等到页面重新向上滚动回到原位，工具栏也会回到默认位置（==relative定位==）。
* 必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。
* 当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

sticky定位可以实现一些很有用的效果
* 动态固定
* 堆叠效果:页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。
* 表格的表头锁定:sticky必须设在`<th>`元素上面，不能设在`<thead>`和`<tr>`元素，因为这两个元素没有relative定位，也就无法产生sticky效果。