CSS的position属性用于定义元素的定位方式。它可以用于控制元素在文档流中的位置，从而实现页面布局和定位效果。position属性有四个可选值：static、relative、absolute和fixed、sticky。
-
1.
static：默认值，元素在文档流中正常布局，不受其他定位属性的影响。top、bottom、left和right属性不起作用。 -
2.
relative：相对定位，元素相对于其正常位置进行定位。通过调整top、bottom、left和right属性，可以相对于元素原始的位置进行偏移。相对定位不会改变其他元素的布局，也不会覆盖其他元素。 -
3.
absolute：绝对定位，元素相对于其最近的已定位（position的值不为static）祖先元素进行定位。如果没有已定位的祖先元素，那么相对于文档的初始坐标进行定位。绝对定位会从文档流中脱离，不会占据原始位置。通过调整top、bottom、left和right属性，可以设置元素的精确位置。绝对定位的元素会覆盖其他元素，如果其他元素有定位属性，可以通过z-index属性调整元素的层叠顺序。 -
4.
fixed：固定定位，元素相对于视窗进行定位，始终保持在固定位置，不随页面滚动而改变位置。通过调整top、bottom、left和right属性，可以设置元素的位置。与绝对定位类似，固定定位的元素也会从文档流中脱离，并且覆盖其他元素。 -
5.
sticky是 CSS 的一个定位属性值，用于元素的定位。它类似于position: relative和position: fixed的混合模式。
sticky
当使用 position: sticky 时，元素首先像 position: relative 一样在文档流中占据位置，直到满足特定的条件时，它会固定在指定的位置，就像 position: fixed 一样。它的粘性行为是相对于滚动容器而言的，如果滚动容器的滚动超过了指定的阈值，元素将固定在容器的特定位置。一旦触发了固定行为，元素将保持在视口中直到滚动回达到固定的位置。
position: sticky 需要同时设置 top、bottom、left 或 right 属性中的至少一个以确定元素的固定位置。这取决于元素的具体布局需求。比如，设置 top: 0; 可以将元素固定在顶部，设置 bottom: 0; 可以将元素固定在底部。
请注意以下几点关于 position: sticky 的特性和注意事项：
- 兼容性：
position: sticky的兼容性较好，但某些老旧浏览器可能不支持。在使用时，请确保在需要兼容旧版浏览器的情况下提供替代方案。 - 父容器限制：父容器需要设置
overflow: scroll或overflow: auto，以创建一个滚动容器以便position: sticky生效。 - 注意阈值：需要通过设置
top、bottom、left或right属性中的某个值来确定滚动容器滚动多少距离后触发元素的固定行为。没有明确的值，元素将不会固定。 - 对于垂直方向上的固定：在进行垂直方向上的固定时，容器的高度不能超过视口高度，否则
position: sticky将不会生效。 - 内部元素不会被遮挡：
position: sticky元素固定时，其内部的元素不会被遮挡。但是，父级元素的z-index可能会影响sticky元素。 - 滑动性能：过多地使用
position: sticky可能会导致滚动性能下降，特别是对于复杂布局或移动设备。 - 处理重叠：在某些情况下，多个
position: sticky元素在同一位置重叠时，它们的层叠顺序可能会影响固定的效果。可以使用z-index调整层叠顺序以解决冲突。
position: sticky 提供了一种简单而强大的方式实现元素的吸顶或吸底效果，使得页面更加互动且用户友好。但在使用时，需要注意兼容性和特定的布局需求。
总结：
- 对于绝对定位和固定定位的元素，如果没有设置
width属性，宽度将根据内容自动调整。 - 对于相对定位、绝对定位和固定定位的元素，可以使用
z-index属性设置层叠顺序，较大的值将覆盖较小的值。 - 设置元素为绝对定位或固定定位时，最好为其设置一个明确的宽度，以避免宽度自适应的问题。
- 当使用绝对定位或固定定位时，元素的定位参考点是其父级定位元素（已设置
position为relative、absolute或fixed）。如果没有父级定位元素，则参考点是页面的初始坐标。 - 当使用固定定位时，需要注意元素的位置可能会超出视窗，此时可以通过设置
top、bottom、left和right属性来调整位置。
