锚点偏移

最新推荐文章于 2023-11-07 17:44:35 发布

Joyce的前端日常

最新推荐文章于 2023-11-07 17:44:35 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签：锚点偏移

本文链接：https://blog.youkuaiyun.com/joyce_lcy/article/details/44831505

版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

在进行锚点定位时，页面往往定位到页面的最顶部，无论是上部有导航条，还是出于美观考虑，都希望定位后该内容与页面顶部有一些间距。而锚点自动定位是无法达到的。如何处理呢？

我们无法改变的是需要定位的元素一定要到最顶部，可以考虑采用padding-top进行加高。然后问题出现了，此时，元素上部会有一大截空白。于是，可以考虑设置margin-top为负，数值等同于padding-top的设置抵消掉空白。

需要注意的是，此方法会对上部的内容进行遮盖，造成链接不能点击等问题，可以通过设置z-index解决。

demo如下：

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚点偏移</title>
    <style>
            /*事件背景样式*/
            .all{ width:500px; margin:0 auto;}
            p{  height:600px; background-color: #f1f3ff; }
            a{ position:absolute; top:20px; right:300px;}
            /*关键样式*/
            h3{ margin-top:-100px;padding-top:100px;/*或使用border亦可*//*border-top:solid 100px transparent;*/}
    </style>
</head>
<body>
    <div class="all">
        <div>
            <p>这是一个段落</p>
            <h3 id="here">这是锚点定位的标题</h3>
            <p>这又是一个段落</p>
            <p>这还是一个段落</p>
        </div>
        <a href="#here">去到锚点位置</a>
    </div>
</body>
</html></span>