纯CSS实现锚点跳转位置上下偏移的办法

昨天在sf的时候看到了一位朋友的提问,是问如何使页面上的a标签被点击时跳转的锚点的位置往下偏移一点,不会被最上方的header给遮盖。当时看到这个问题也没想出纯CSS的解决方法,以为只有用js才能实现,后来另一位朋友的解答,恍然大悟,在他给出的方法上加以修改,完美实现了纯CSS的解决方案

HTML:

这里写图片描述

CSS:

这里写图片描述

效果图:

这里写图片描述

创建了一个隐藏的div,其高度和top都是等于fiexd的顶部的高度

这里写图片描述

这里写图片描述

我们可以发现,新增的隐藏快的目的就是就是将我们的内容撑下来从而展现在页面上,而不是被fixed的内容所覆盖(因为absolute元素的定位是根据relative来决定的,所以这里隐藏快的位置始终在文字的top等于-50px的位置)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[oralce] 利用CRT的端口转发功能直接用plsql访问数据库

From: http://blog.sina.com.cn/s/blog_498a6eeb0100w197.html 如图所示:在实际中经常碰到上面的情况, 要访问生产上的数据库必须通过跳转机, 而且只能用sqlplus来访问,很不方便,而且为了安全,一般情况下不…

rsync同步时,删除目标目录比源目录多余文件的方法(--delete)

在日常运维工作中,我们经常用到rsync这个同步神器。有时在同步两个目录时,会要求删除目标目录中比源目录多出的文件,这种情况下,就可用到rsync的–delete参数来实现这个需求了。 实例说明: 在服务器A上同步/tmp/work目…

[转载]如何做到 jQuery-free?

http://www.ruanyifeng.com/blog/2013/05/jquery-free.html jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升…

请教大家:如何把.DCU文件反编译回源代码?谢谢。

请教大家:如何把.DCU文件反编译回源代码?谢谢。 Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiAPI/html/delphi_20061116174815216.html如题。扣谢。 一定结贴。 我也想知道有没办法~~顶一顶~~ .DCU没有办法反编译成源代码的。 是不可能的…

CSS之flex需要知道的一切(一)

1.flex速记 1.1 flex: 0 1 auto 很容易理解这一点,flex-basis设置为auto,这意味着Flex项目的初始宽度计算是基于内容的大小来自动变化 flex-grow设置为0,这意味着flex-grow不会改变Flex项目的初始宽度,也就是flex-grow的开关是…

[文摘20090203]手机基本知识

本文转自:http://www.paipaitxt.com/r4625042/ 原文如下: ~手机类型~ 按操作系统划分,可分为:智能手机与非智能手机 一般具有:Symbian6.0,Windows CE,Palm,Linux开放性操作系统的手机…

win7 安装 IIS

和xp不同,xp安装 IIS需要下载额外的软件包. 步骤 1,依次打开 "控制面板" -> "程序" ->"打开或关闭windows功能": 2,安装图示选择: 确定即可.转载于:https://www.cnblogs.com/listened/p/4014762.html

如何处理Oracle客户端查询乱码问题

From: http://archive.cnblogs.com/a/2074122/ 1,查Oracle数据库创建时候的字符集:Oracle服务器端执行SQL> select name, value$ from sys.props$ where name like NLS%;NAME VALUE$------------------------------ -------------------------------…

git 下载项目到本地

1、新建一个目录,存放下载下来的项目,我在D盘新建了一个“gitspace”文件夹,用来存放下载下来的项目 2、进入刚刚新建的文件夹,即进入“gitspace”,点击鼠标右键,选择"Git Bash Here",如下图&am…

CSS之flex需要知道的一切(二)

4. flex实战项目音乐播放器 1.你可以让整个包含体作为Flex容器(下图中被包含在红色边框内的部分),并把布局的其它部分分成Flex项目(Item 1 和 Item 2) 注:你知道Flex项目也可以成为Flex容器吗?…

iOS获取电量方法

ios简单的方法: [UIDevice currentDevice].batteryMonitoringEnabled YES;double deviceLevel [UIDevice currentDevice].batteryLevel;获取当前剩余电量, 我们通常采用上述方法。这也是苹果官方文档提供的。 它返回的是0.00-1.00之间的浮点值。 另外, -1.00表示模…

11种控制内容展示的JavaScript特效和技巧

交付信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计,能使用户更好的理解内容。 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它。本文里面,我们为你收集整理了11种高超的JavaScipt…

MAC上安装brew

MAC上安装brew brew 是 Mac 下的一个包管理工具,作用类似于 centos 下的 yum。 brew 可以用一条命令,就可以在mac上安装、卸载、更新各种软件包,因为brew的使用方便,如今已成为使用mac电脑的程序员的必备工具 mac上如何安装bre…

CSS之Multi-columns的列数和列宽

“Multi-column”译成中文就是“多列”,这个”Multi-column”是W3C给CSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂…

[Linux] 修改系统默认编码

locale 命令 locale 命令用以设置程序运行的语言环境。 locale 设置语言环境的命名规则为 Language_area.charset,例如 en_US.utf8 表示语言为英语,地区为美国,字符集为 UTF-8。 查看当前字符映射文件 $ locale charmapUTF-8 查看可用公共语言…

Taro+react开发(44)taro基本使用

Taro.Component Taro.Component 是一个抽象基础类,因此直接引用 Taro.Component 几乎没意义。相反,你通常会继承自它,并至少定义一个 render() 方法。通常你定义一个 Taro 组件相当于一个纯 JavaScript 类:class Welcome extends …

人生的34个好习惯

1.不说“不可能”三个字2.凡事第一反应::找方法,而不是找借口3.遇到挫折大声对自己说:“太棒了”4,不说消极的话,不落入消极情绪,一旦出现立即正面处理5.凡事先订立目标,并且尽量制作…

homebrew长时间停在Updating Homebrew 这个步骤

在国内的网络环境下使用 Homebrew 安装软件的过程中可能会长时间卡在 Updating Homebrew 这个步骤。 例:执行 brew install composer 命令 ➜ ~ brew install composer Updating Homebrew... # 如果碰到长时间卡在这里,参考以下 2 种处理方法 方法 1&…