CSS学习笔记(七) 粘性布局

雲飛扬 · 发表于 2019-9-3 20:46:00

粘性布局是什么呢？我们先来看看效果演示

没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果

这样的效果究竟是如何实现的呢？很简单，只要使用 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学习笔记】

CSS学习笔记(七) 粘性布局

浏览过的版块