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

最新推荐文章于 2024-03-14 00:15:00 发布

weixin_30756499

最新推荐文章于 2024-03-14 00:15:00 发布

阅读量478

点赞数 1

原文链接：http://www.cnblogs.com/wsmrzx/p/11455536.html

版权

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

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

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

转载于:https://www.cnblogs.com/wsmrzx/p/11455536.html

weixin_30756499

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记(七) 粘性布局

粘性布局是什么呢？我们先来看看效果演示没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的吸附效果这样的效果究竟是如何实现的呢？很简单，只要使用 position: sticky 即可，一份简单的示例代码如下：<!DOCTYPE HTML><html><head> <style>...
复制链接

扫一扫