粘性布局是什么呢？我们先来看看效果演示
没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果
这样的效果究竟是如何实现的呢？很简单，只要使用 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
