CSS锚点定位时被顶部固定导航栏遮住 - yingzi__block

时间:2024-03-03 21:53:26

CSS锚点定位时被顶部固定导航栏遮住

问题:使用锚点定位时,部分内容被顶部的固定导航栏遮住

锚点使用代码示例如下:

<a href="#first">a</a>
<div id="first">
    hello
</div>

解决方法:

一、使用padding+margin

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

#first {
    padding-top: 60px;/* 60px是导航栏高度 */
    margin-top: -60px;
 }

二、使用伪类:target

#first:target {
    padding-top: 60px;
    margin-top: -60px;
  }