粘性定位
粘性定位（Sticky Positioning）是CSS中的一种定位方式，它是相对于普通文档流、相对定位和绝对定位而言的第四种定位方式。粘性定位使得元素在滚动到特定位置时会固定在屏幕上，但仍然在文档流中占据空间，不会脱离文档流，也不会覆盖其他元素。
粘性定位的元素在未满足触发条件时（滚动到指定位置），表现和相对定位（Relative Positioning）一样，即在文档流中按照正常布局排放。当滚动到指定位置时，元素会固定在其容器（最近的具有滚动机制的祖先元素）的特定位置上，不再随滚动而移动。当继续向下滚动时，元素会在满足触发条件的范围内继续保持固定定位，当滚动超出触发条件范围时，元素又会回到正常文档流中的位置。
粘性定位的使用语法是通过设置 position: sticky; 来实现，并可以在 top、bottom、left 或 right 属性中指定相应的值，表示元素在满足触发条件时固定在距离指定边距的位置。
以下是一个示例代码，演示如何使用粘性定位将导航栏固定在屏幕顶部：
<!DOCTYPE html>
<html>
<head>
<title>粘性定位</title>
<style>
body {
margin: 0;
padding: 0;
}
.navbar {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
}
.content {
height: 1000px; /* 用于产生滚动 */
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">这是导航栏，将固定在屏幕顶部</div>
<div class="content">这是页面内容，用于产生滚动</div>
</body>
</html>
在这个示例中，.navbar 类名的元素会在滚动到页面顶部时固定在屏幕顶部，不再随滚动而移动，而 .content 类名的元素会产生滚动条以模拟页面内容较多的情况。
查看15道真题和解析
腾讯开奖356人在聊
SHEIN公司福利 517人发布