粘性布局是什么呢？我们先来看看效果演示
没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果
这样的效果究竟是如何实现的呢？很简单，只要使用 position: sticky 即可，一份简单的示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
.header {
background-color: black;
color: white;
text-align: center;
font-size: 36px;
line-height: 72px;
/* 实现吸附效果 */
position: sticky; /* 设置 position 为 sticky */
top: 0px; /* 设置 top、right、bottom、left 属性中的至少一个 */
}
.container {
background-color: gray;
color: white;
font-size: 24px;
line-height: 48px;
white-space: pre;
}
</style>
</head>
<body>
<div class="header">这是固定的标题</div>
<div class="container">
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
这是滚动的文字
</div>
</body>
</html>
一个设置 position 为 sticky 的元素，它的样式表现如下：
- 当元素在页面视图内时，position 属性的值相当于 relative
- 当元素超出页面视图时，position 属性的值相当于 fixed
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】