「趣学前端」页面上吸顶的效果是怎么做到的

背景

我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上篇习题解析

上一篇结尾留了一个小习题，我们先来看一下，上下两层结构有重合是如何实现。

一般下实现重合效果的方式是使用定位。定位元素可以和其他元素重叠。(​​点击查看完整代码​​)

知识点讲解

今日主要讲讲页面上的定位效果是如何实现的。

有趣的定位效果

下面这些好玩的展示效果都是通过定位实现的。

吸顶

超出父容器

重叠元素

粘性定位

知识点

定位

以下知识内容来自于​​菜鸟教程​​

实现方案

讲解代码

讲解代码放到了​​在线预览平台​​。

讲解代码操作步骤

演示代码都可通过代码复制拷贝到本地的IDE中进行演示。也可以自己照着敲击学习。

第一步：选中一个想查看代码的功能项；

第二步：将查看的功能的代码进行复制；

第三步：将代码粘贴到一个空档html文档中；

第四步：运行这个新建的html文档，刚才的顶部模块功能就出来啦。

一个小习题

掘金写文章的时候可以选择不同的主题，其中有一个主题，会将代码块展示成如下图所示，左上角和右下角分别有一个带不同颜色的折角，这个折角是怎么实现的呢？解答方案会在下篇文章中给出。

总结

今天讲解的定位功能，通过对元素的position属性设置不同的值，实现不同的展示效果。

有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

前端的千变万化，源于对前端知识的融会贯通。