纯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来访问,很不方便,而且为了安全,一般情况下不…

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

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

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

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

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容器吗?…

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

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

CSS之Multi-columns的列数和列宽

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

CSS之Multi-columns的column-gap和column-rule

column-gap就相当于两列之间的空白处,而column-rule就相当于一条分隔线,换句话说呢?column-gap就像我们web页面中的margin一样,而column-rule就类似于border,不过他们只是存在相邻两列之间 另外column-gap和column-ru…

CSS之Multi-columns的跨列

column-span主要用来定义一个分列元素中的子元素能跨列多少列。前面大家都知道column-width,column-count等属性让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要基中一段内容或一个标题不进…

详解Microsoft Office Communication Server (OCS) 2007 标准版部署(上)

详解Microsoft Office Communication Server (OCS) 2007 标准版部署(上)前几篇博文中介绍了LCS今天我们来部署ocs,它是lcs的升级版,功能比lcs多个很多,可以视频,多人会议,等多项功能。但是安装起…

CSS之浮动(一)

1. 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情 2. 浮动的包裹性 撇开浮动的“破坏性”,浮动就是个带有方位的display:inline-block属性 display:inline-block某种意义上的作用就是包…

CSS之浮动(二)

1. 浮动的非本职工作 我们只要静下心来好好想想浮动的本质,实现的原理,就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗?即“包裹与破坏”。我们可以用这个(“包裹与破坏”)解释为…

iOS8中提示框的使用UIAlertController(UIAlertView和UIActionSheet二合一)

本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494597IOS8UIAlertViewUIActionSheetiOS8推出了几个新的“controller”,主要是把类似之前的UIAlertView变成了UIAlertController,这不经意的改变,貌似把我之前理解的“contro…

记腾讯互娱网站布局(1)

1.导航栏 第一步:设置最外层的容器的定位方式、宽度和高度以及背景 第二步:给第二层容器设置内容的居中显示 第三步:设置居中的logo的定位和位置 第四步:设置6个标志的布局 设置所有的导航栏项目的定位和距离顶部的距离&#xff0…

Taro+react开发(48)taro中switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

记腾讯互娱网站布局(2)

2.头图特效 给头图设置宽度100%以及定高1110px,同时设置display为table,和定位方式fixed 通过设置绝对定位以及固定宽高和背景的方式来实现 存放动态特效的盒子采用绝对定位,并且触发流体特效以及百分百宽的方式 主图上标志的实现是采用外部容…