首先可以先预览一下博客：https://blog.csdn.net/qq_44327851/article/details/135149046，对定位的相关知识进行简单的回顾。言归正传，在实际开发运用中，我们不可置否的会发现：接触最多定位是absolute,relative，而对于粘性定位，在开发中我们可能不会一下子想到。那什么是粘性定位，一般应用在什么场景呢？让我们一起来探索！
概念：
position: sticky是CSS中的一种定位方式，它允许元素在滚动时固定在特定位置，直到滚动到特定位置时才开始滚动。它会产生动态效果，是relative和fixed的结合。
特点：
- 当元素在屏幕上可见时，它的行为就像position: relative；当元素在屏幕上不可见时，它的行为就像position: fixed。
- 当滚动到元素的位置时，元素会固定在指定的位置，直到滚动到另一个指定位置。
- 元素的固定位置是相对于最近的具有滚动条的祖先元素。
示例：
假设我们有一个导航栏，当用户向下滚动页面时，导航栏应该固定在页面的顶部。当用户向上滚动时，导航栏应该回到原来的位置。
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px 0;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Bar Example</h3>
<p>Scroll this page to see the effect. When you scroll this page, the navigation bar will stick to the top of the page.</p>
</div>
</body>
</html>失效情况：
- 父元素不能设置为overflow:hidden或者overflow:auto：当父元素设置了overflow:hidden或者overflow:auto时，粘性定位可能会失效。因为粘性定位需要根据父级元素的滚动来确定是否固定，如果父元素设置了overflow:hidden或者overflow:auto，可能会影响这种滚动行为。
- 必须指定top、bottom、left、right中的至少一个值：如果没有指定这些值中的任何一个，元素将仅处于相对定位状态，而不会表现为粘性定位。
- 父元素的高度不能低于sticky元素的高度：如果父元素的高度低于sticky元素的高度，那么当元素到达底部时，它将无法保持固定位置。
- 粘性元素仅在其父元素内生效：粘性定位是相对于其最近的具有滚动条的祖先元素的，如果没有滚动条的祖先元素，粘性定位可能会失效。
注意事项：
- 在使用position: sticky时，需要确保在支持该特性的浏览器上进行测试，因为一些旧版本的浏览器可能不支持该特性。
- 当使用position: sticky时，需要注意元素的父级元素是否具有滚动条，因为sticky定位的生效需要相对于最近的具有滚动条的祖先元素。
- 在某些情况下，滚动容器的高度可能会影响sticky元素的表现，需要仔细考虑滚动容器的高度和sticky元素的位置。