html导航栏重叠怎么办,css锚点定位被顶部固定导航栏遮住的解决方案

很多网站都有一个固定在上方的导航栏,方便用户搜索和跳转到其他页面。

同时为了方便用户浏览长文档,都会加上目录,点击段落标题跳转到段落所在的位置,

如图所示:

76b5b49b89a1a256ffd1db64a25344db.png

如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。

1bf1d597d17b07489f304bdc8df7d774.png

1. 锚点定位机制

如果没有滚动条,锚点失效。

如果有滚动条,滚动条滚动到地址 hash (地址 # 号后面的内容)对应的锚点元素padding-box上边缘位置。

2. 解决方案

示例

(1)padding+margin

padding影响锚点元素的定位,margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置,使用margin抵消padding对布局的影响。

1.出现的时间、地点不同

.first {

padding-top: 60px;/* 60px是导航栏高度 */

margin-top: -60px;

}


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部