纯CSS实现锚点跳转位置上下偏移的办法
来源：互联网 发布：jdbc mysql的url 编辑：程序博客网 时间：2024/05/16 10:21
昨天在sf的时候看到了一位朋友的提问，是问如何使页面上的a标签被点击时跳转的锚点的位置往下偏移一点，不会被最上方的header给遮盖。当时看到这个问题也没想出纯CSS的解决方法，以为只有用js才能实现，后来另一位朋友的解答，恍然大悟，在他给出的方法上加以修改，完美实现了纯CSS的解决方案
HTML:
CSS:
效果图：
创建了一个隐藏的div，其高度和top都是等于fiexd的顶部的高度
我们可以发现，新增的隐藏快的目的就是就是将我们的内容撑下来从而展现在页面上，而不是被fixed的内容所覆盖(因为absolute元素的定位是根据relative来决定的，所以这里隐藏快的位置始终在文字的top等于-50px的位置)
阅读全文
0 0
- 纯CSS实现锚点跳转位置上下偏移的办法
- 纯CSS实现多页签跳转
- 纯CSS时间轴实现的办法，超简单的！
- 跳转到页面的指定位置， 锚点平滑跳转
- 纯CSS实现双击链接跳转功能
- 实现页面内的指定位置跳转 HTML标记语言:锚点的使用
- 根据经纬度计算该位置点与附近某一经纬度位置点的位置偏移角
- 根据经纬度计算该位置点与附近某一经纬度位置点的位置偏移角
- JS+CSS实现几个DIV层上下移动交换位置的效果
- 纯css实现小圆点和三角形
- 页面内容多，加载时间长的时候，锚点位置偏移问题
- jquery的css之--获取位置偏移函数position()
- 一个使用锚点的纯css图片切换
- 关于锚点和label的纯css内容切换
- 如何通过微调整功能，解决打印位置上下偏移的问题？(转)
- 纯CSS实现的箭头
- css锚点定位偏移原理兼容浏览器
- 锚点定位偏移问题的解决
- C/C++中指针与数组的相关知识
- SSM框架下各个层的解释说明
- 软件著作权和专利的区别
- 重新出发
- 事务、视图、索引和备份
- 纯CSS实现锚点跳转位置上下偏移的办法
- JSP知识点
- set去除重复对象
- Cache控制器的设计
- $.ajax()方法详解
- 《深入理解java虚拟机》笔记：
- Maven+MySql(Spring+Mybatis+SpringMVC+Maven+MySql)项目搭建实例
- js打开新窗口的方法
- iOS实现UIView渐变效果及实现透明功能
