案例效果

关键代码

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            padding-left: 100px;

            padding-top: 100px;

        }

        article{

            width: 400px;

            height: 200px;

            border: solid 5px blueviolet;

            overflow: scroll;

        }

        article section {

            padding-bottom: 150px;

        }

        article section:nth-of-type(even) h2{

            background: #333;

        }

        article section h2{

            background: blueviolet;

            color: white;

            position: sticky;

            top: 0px;

        }

    </style>

</head>

<body>

    <article>

        <section>

            <h2>hdcms.com</h2>

            <p>

                后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。

            </p>

        </section>

        <section>

            <h2>后盾人</h2>

            <p>

                后盾人隶属于北京后盾计算机技术培训有限责任公司，是专注于培养中国互联网精英PHP程序语言专业人才的专业型培训机构，拥有七年培训行业经验。后盾人拥有国内一线的讲师和技术团队，团队成员项目经验均在8年以上，团队曾多次为国内外上市集团、政府机关的大型项目提供技术支持，其中包括新浪、搜狐、腾讯、宝洁公司、联想、丰田、工商银行、中国一汽等众多大众所熟知的知名企业。

            </p>

        </section>

        <section>

            <h2>houdunwang.com</h2>

            <p>

                后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。

            </p>

        </section>

    </article>

</body>

</html>l

CSS:粘性定位 使正文标题置顶的更多相关文章

  1. CSS粘性定位

    粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...

  2. Android ListView标题置顶效果实现

    一. 有图有真相     二.实现: 1. 基于ListView分类效果 2. TitleView即标题的处理(创建) 3. 处理TitleView的三种状态 三.源码: 例子下载 实现可以看代码,具 ...

  3. android linearlayout imageview置顶摆放

    在练习android时,想在Linearlayout内放一图片,使其图片置顶,预期效果是这样的: 但xml代码imageview写成这样后, <ImageView android:layout_ ...

  4. Creating Dialogbased Windows Application (3) / 创建基于对话框的Windows应用程序（三）Checkbox的应用、窗体置顶、设置图标 / VC++, Windows

    创建基于对话框的Windows应用程序(三) —— Checkbox的应用.窗体置顶.设置图标 上一节创建的窗体应用程序中,我们用到了Button和StaticText这两个控件.这一节中我们将学习使 ...

  5. 关于CSS的粘性定位sticky失效问题

    CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...

  6. vc 使窗口置顶 在最前面

    bool SetWindowTop(CWnd* pWnd){ if(!pWnd) {   return false; } if(pWnd->GetExStyle()&WS_EX_TOPM ...

  7. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  8. [置顶] Silverlight之控件应用总结（一）（3）

    [置顶] Silverlight之控件应用总结(一)(3) 分类: 技术2012-04-02 20:35 2442人阅读 评论(1) 收藏 举报 silverlightradiobuttondatat ...

  9. css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  10. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

随机推荐

  1. PaddlePaddle-快速入门

    PaddlePaddle-快速入门 终于进入到新手入门第四课啦~在最后一门课中我会给大家讲解如何快速入门PaddlePaddle,并让大家跑通一个小demo来熟悉PaddlePaddle的基本命令. ...

  2. 18年CCCC赛后总结

    C4赛后总结: 我正式入坑以来,大约5个月,这也是我第一次出去参与这样正式的比赛,其实比赛结果并不尽人意,但有很多还是需要记录下来的,通过这次比赛的确获得了很多的比赛经验: 一赛前: 其实赛前的状态, ...

  3. 2023-04-11：给你下标从 0 开始、长度为 n 的字符串 pattern ， 它包含两种字符，‘I‘ 表示 上升 ，‘D‘ 表示 下降 。 你需要构造一个下标从 0 开始长度为 n + 1 的

    2023-04-11:给你下标从 0 开始.长度为 n 的字符串 pattern , 它包含两种字符,'I' 表示 上升 ,'D' 表示 下降 . 你需要构造一个下标从 0 开始长度为 n + 1 的 ...

  4. 2022-11-16：给你一个数组 nums，我们可以将它按一个非负整数 k 进行轮调， 例如，数组为 nums = [2,4,1,3,0]， 我们按 k = 2 进行轮调后，它将变成 [1,3,0,

    2022-11-16:给你一个数组 nums,我们可以将它按一个非负整数 k 进行轮调, 例如,数组为 nums = [2,4,1,3,0], 我们按 k = 2 进行轮调后,它将变成 [1,3,0, ...

  5. 2021-12-30：分裂问题。 一个数n，可以分裂成一个数组[n/2, n%2, n/2]， 这个数组中哪个数不是1或者0，就继续分裂下去。 比如 n = 5，一开始分裂成[2, 1, 2]， [2

    2021-12-30:分裂问题. 一个数n,可以分裂成一个数组[n/2, n%2, n/2], 这个数组中哪个数不是1或者0,就继续分裂下去. 比如 n = 5,一开始分裂成[2, 1, 2], [2 ...

  6. y总算法基础课+算法提高课+算法进阶课超全模板

    y总超全算法模板 y总模板自取 喜欢的可以点个赞支持一下^-^ 模板展示

  7. RocketMQ 顺序消费机制

    顺序消息是指对于一个指定的 Topic ,消息严格按照先进先出(FIFO)的原则进行消息发布和消费,即先发布的消息先消费,后发布的消息后消费. 顺序消息分为分区顺序消息和全局顺序消息. 1.分区顺序消 ...

  8. 在树莓派上实现numpy的LSTM长短期记忆神经网络做图像分类，加载pytorch的模型参数，推理mnist手写数字识别

    这几天又在玩树莓派,先是搞了个物联网,又在尝试在树莓派上搞一些简单的神经网络,这次搞得是LSTM识别mnist手写数字识别 训练代码在电脑上,cpu就能训练,很快的: import torch imp ...

  9. SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到SpringBoot jar包中

    SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到SpringBoot jar包中 转载 首先我们应该知道我们把SPRINGBOOT项目打包成WAR包和 ...

  10. python里class(类)中object是什么意思

    python的class(类)中的object是什么意思? 写object和不写object有什么区别? 示例代码 class Test: name = "libai" class ...