css定位深入理解

1.relative定位

相对定位（relative positioning）是指相对于元素原本的位置进行定位，可以通过设置top、bottom、left、right等属性来改变元素的位置。
相对定位的特点是不会影响其他元素的位置，因此在页面布局时往往会使用相对定位来微调元素的位置。

2.absolute 定位

绝对定位（absolute positioning）是指相对于其最近的已定位父元素进行定位，如果没有已定位的父元素，则相对于body元素进行定位。可以通过设置top、bottom、left、right等属性来改变元素的位置。

特点：
1.是会影响其他元素的位置，因此在使用绝对定位时需要注意元素的位置是否会与其他元素重叠。
2.absolute 定位使元素的位置与文档流无关，因此不占据空间。

3.fixed 定位

固定定位（fixed positioning）是指元素相对于浏览器窗口进行定位，可以通过设置top、bottom、left、right等属性来改变元素的位置。固定定位的特点是在滚动页面时元素位置不变，因此在制作固定的导航栏或悬浮广告等效果时会使用固定定位。

特点：
1.Fixed定位使元素的位置与文档流无关，因此不占据空间。
2.Fixed定位的元素和其他元素重叠。

3.sticky 定位

粘性定位：基于用户的滚动位置来定位。
1.粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。