position: sticky;

position: sticky;是一种CSS定位属性，用于创建一个元素在滚动时保持在特定位置的效果。它有以下特点和使用条件：

1. 设置了position: sticky的元素不会脱离文档流，即它仍然占据原来的位置。
2. 当元素在区域内时，它不受定位的影响，例如top、left等设置无效。
3. 当发生滚动，元素要移出区域时，定位会变成fixed，根据设置的left、top的值进行定位，就像fixed效果一样。\[1\]
4. sticky元素设置的left, right, top, bottom的值是相对于容器元素的。当粘性约束元素滚出视口时，sticky元素也会滚出视口。\[2\]
5. 粘性定位不生效的情况包括未指定left, right, top和bottom中的任何一个值，以及父级元素有overflow设置为除了visible以外的值。父元素的高度也不能低于sticky元素的高度。\[2\]\[3\]
6. 如果多个sticky元素在同一父容器中，并且定位相等，则会发生重叠。如果sticky元素不属于相同父元素，但它们的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。\[3\]
7. 必须指定top、left、bottom、right四个中的至少一个值，否则其行为与相对定位相同。当同时设置top和bottom时，top的优先级高；当同时设置left和right时，left的优先级高。\[3\]

综上所述，position: sticky;可以用于创建在滚动时保持在特定位置的元素效果，但需要注意其使用条件和特点。
#### 引用[.reference_title]
- *1* *3* [position:sticky](https://blog.csdn.net/JiangLittleBai/article/details/108653463)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [彻底理解粘性定位（position：sticky）](https://blog.csdn.net/weixin_57585624/article/details/120116514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]