抵消html锚点以调整固定标题

这个问题在这里已经有了答案:

  • 固定页面标题与页内定位符重叠25个答案

  • 你可以在没有任何JavaScript的情况下使用CSS。

    给你的主持人上课:

    <a class="anchor" id="top"></a>
    

    然后,您可以通过将锚点放置在比它实际出现在页面上的位置更高或更低的位置,使其成为块元素并将其定位。 -250px将定位锚点250px

    a.anchor {
        display: block;
        position: relative;
        top: -250px;
        visibility: hidden;
    }
    

    我发现这个解决方案:

    <a name="myanchor">
        <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
    </a>
    

    这并不会在内容上产生任何差距,而且链接链接非常好。


    我也在寻找解决方案。 在我的情况下,这很容易。

    我有一个包含所有链接的列表菜单:

    <ul>
    <li><a href="#one">one</a></li>
    <li><a href="#two">two</a></li>
    <li><a href="#three">three</a></li>
    <li><a href="#four">four</a></li>
    </ul>
    

    在它下面的标题应该去。

    <h3>one</h3>
    <p>text here</p>
    
    <h3>two</h3>
    <p>text here</p>
    
    <h3>three</h3>
    <p>text here</p>
    
    <h3>four</h3>
    <p>text here</p>
    

    现在,因为我的页面顶部有一个固定的菜单,所以我不能将它放到我的标签上,因为那是菜单的后面。

    相反,我把正确的id放在我的标签里面。

    <h3><span id="one"></span>one</h3>
    

    现在使用2行css来正确定位它们。

    h3{ position:relative; }
    h3 span{ position:absolute; top:-200px;}
    

    更改顶部值以匹配固定标题的高度(或更多)。 现在我认为这也适用于其他元素。

    链接地址: http://www.djcxy.com/p/15695.html

    上一篇: offsetting an html anchor to adjust for fixed header

    下一篇: color on only the text not the empty space in a td