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

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

粘性布局是什么呢?我们先来看看效果演示20210430200830880.gif


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

这样的效果究竟是如何实现的呢?很简单,只要使用 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

目录
相关文章
|
29天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
1月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
22 0
|
1天前
|
前端开发 JavaScript
css制作瀑布流布局
css制作瀑布流布局
5 0
|
4天前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
19天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
23天前
|
前端开发 JavaScript API
|
24天前
|
Web App开发 前端开发 JavaScript
探索CSS中的粘性定位:解锁网页布局的新可能
这篇文章详细解释了CSS中的sticky定位方式,并讲解了它的工作原理。
|
1月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局

相关产品

  • 云迁移中心