css-锚点链接, 标题被表头遮住了,怎么处理?

YogaMiller

已于 2022-11-20 09:47:38 修改

阅读量158

点赞数

文章标签： css css3 html

于 2022-11-19 13:17:23 首次发布

本文链接：https://blog.csdn.net/YogaMiller/article/details/127935456

版权

inline 元素绑定id 且加padding

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            div {
                position: fixed;
                height: 50px;
                background-color: #fff;
                top: 0;
                left: 0;
                width: 100%;
            }

            div>a {
                font-size: 20px;
                padding: 0 10px;
            }

            h2 {
                height: 1000px;
                background-color: #ec9066;
            }

            h2:nth-of-type(1) {
                margin-top: 50px;
            }

            h2:nth-of-type(2) {
                background-color: #ddd44f;
            }

            h2:nth-of-type(3) {
                background-color: #9bec58;
            }

            h2:nth-of-type(4) {
                background-color: #69e2f1;
            }

            h2>span {
                padding-top: 50px; // 代码
            }
        </style>
    </head>

    <body>
        <div>
            <a href="#a">a</a>
            <a href="#b">b</a>
            <a href="#c">c</a>
            <a href="#d">d</a>
        </div>
        <h2><span id="a">1</span></h2>
        <h2><span id="b">2</span></h2>
        <h2><span id="c">3</span></h2>
        <h2><span id="d">4</span></h2>
    </body>
</html>

在这里插入图片描述

2. 或者直接用 scroll-padding-top

<style>
html {
    scroll-padding-top: 50px;
}
</style>

YogaMiller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-锚点链接, 标题被表头遮住了,怎么处理?

【代码】css-锚点链接, 标题被表头遮住了,怎么处理?
复制链接

扫一扫

css-锚点链接, 标题被表头遮住了,怎么处理?

inline 元素绑定id 且加padding

2. 或者直接用 scroll-padding-top

“相关推荐”对你有帮助么？