HTML锚点定位的一些感受

基本语法

创建锚点


创建跳转连接 其中href 填写锚点的id

到标题

存在问题

一般我们的锚点跳转会直接将锚点置于视窗的最顶部,也就是说锚点的上顶点会与视窗顶部重合。如果这时候我们顶部有固定元素(比如导航之类的),锚点标题就会被遮挡。
为了解决这问题,我们可以使用伪类befor来为锚点标签添加高度以消除固定元素的遮挡部分。

.anchor::before{
    display: block;
    height: 6rem;
    margin-top: -6rem;
    visibility: hidden;
    content: "";
}

具体在于使用margin-top:-6rem来消除高度 a 标签高度的增加对于布局的影响。一定要与height的值为相反数,这样就不会影响之前的布局

你可能感兴趣的:(HTML锚点定位的一些感受)