锚点定位内容被遮挡，css解决方案

最新推荐文章于 2024-06-03 17:45:42 发布

chjcjchen

最新推荐文章于 2024-06-03 17:45:42 发布

阅读量1.4k

点赞数 1

分类专栏： css技巧文章标签： css html

本文链接：https://blog.csdn.net/chjcjchen/article/details/107538548

版权

css技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：头部header使用position: fixed;，下方内容用锚点定位跳转，内容部分被header遮挡。

解决：

1.在跳转的内容上方加个空div，

2.锚点id加到空div上，空div写css并设置样式

<header></header>
<a href="#demo">点击跳转</a>


<div class="cli" id="demo"></div>
<div class="box">我是要跳转到的内容</div>

<style>
    header{
        width: 100%;
        height: 60px;
        background-color: #000000;
        position: fixed;
        left: 0;
        top: 0;
    }
    .cli {
        display: block;
        height: 60px; /*和顶部fixed的高度一致*/
        margin-top: -60px; /*和顶部fixed的高度一致*/
        visibility: hidden;
     }
</style>