前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣
题目
固定定位是由绝对定位衍生出来的,不同之处在于,固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如:固定侧栏、固定顶栏等。这样方便用户,不必再费事寻找栏目。
现在给"nav"盒子设置固定定位属性"position: fixed"、设置"top: 0"、设置自定义宽度、背景颜色。此时滑动滚轮,可以发现"nav"盒子始终固定在页面的最上方。但是,数字1却被覆盖了。由于固定定位的盒子不在流中,所以遮盖住了下方的元素。此时再给"section"盒子设置上外边距为1rem,此时1数字正常出现了。固定定位需要注意下方是否有元素被遮挡。
完成以上所讲的步骤即可通过测试,进入下一节的学习吧。
编辑
核心代码