CSS position属性static/relative/absolute/fixed/sticky用法总结

position属性共有5个值：static/ relative/absolute/fixed /sticky，可以分为3类

1.static

position属性的默认值。浏览器会按照源码的顺序，决定每个元素的位置。此时top、bottom、left、right这四个属性无效。

2.relative/absolute/fixed

相对定位，都是相对于某个基点的定位，每个属性值的基点不同。可以搭配top、bottom、left、right四个属性的一个或多个使用，用来指定偏移的方向和距离。如果一个都不用，初始位置是元素的默认位置。

2.1relative

相对于自己原来的位置（即static的默认位置）。页面其他元素的位置不会改变。

2.2absolute

一般是相对于父元素的位置，但父元素不能是static定位。若父元素是static定位，则继续向上找到一个不是static定位的元素为止。页面其他元素的位置会改变。

2.3fixed

相对于浏览器窗口viewport。形成静态固定在页面上的效果。页面其他元素的位置会改变。

页面其他元素的位置改变的情况，好像是当设置的absolute/fixed元素不存在时其他元素的默认位置。

3sticky

粘性定位，形成动态固定的效果。初始在元素的默认位置，行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，固定在目标位置。

必须搭配top、bottom、left、right四个属性的一个或多个使用，否则不起作用。

另外需要注意在表格中sticky必须设在<th>元素上面，不能设在<thead>和<tr>元素，因为这两个元素没有relative定位，也就无法产生sticky效果。