问题：页面内容导航fixed+锚点错位

solution：

锚点定位跟外边距没有关系。 我们使用内边距padding-top=fixed导航高度来使锚点可以精准定位；

此时新的问题产生了，内边距的存在让页面排版不完美了，我们使用margin-top=-fixed导航高度来抵消内边距，完美解决；

summary：

内边距对锚点定位有效，外边距对锚点定位无效。

当锚点遇到fixed的更多相关文章

  1. 二十一、当锚点遇到fixed（margin和padding）

    当锚点点击跳转的时候,如果上方有fixed,锚点跳转会默认跳转到top为0的地方,有一部分就被遮挡了 解决方法:(像素值随便给的) 给锚点跳转到的具体内容加padding-top:-50px:marg ...

  2. 修正锚点跳转位置 避免头部fixed固定部分遮挡

    如下锚点标签: <div id="id1"> <span class="kkAnchor"></span> 正文正文正文正文 ...

  3. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  4. position:fixed ，锚点定位不准确的问题

    解决方案: 参照 stackoverflow 的做法,在主体内容前加一个暗锚 <div class="anmao" id="experts">< ...

  5. 关于锚点定位，ul设置fixed后，div被覆盖一部分的问题

    例如: 问题: 刚开始的时候 .ul是正常显示的,当页面的滚动条滚动到一定的高度是 ,ul就被设置为 position:fixed:那么 点击 li相对应div就会被 固定定位的ul覆盖住一部分. 解 ...

  6. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  7. 鼠标滚动div固定浮动-加锚点

    页面:    <div class="pa">        <div class="w-95-sl bdl-2"><a>标 ...

  8. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  9. jQuery实现锚点平滑定位

    一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...

随机推荐

  1. 第一次JVM分析记录：Out of Memory Error (workgroup.cpp:96), pid=6196, tid=139999645685504

    tomcat的catalina.out日志报错如下: Exception in thread "http-bio-8081-Acceptor-0" java.lang.OutOfM ...

  2. npm 模块化管理

    我们要使用 npm 进行包管理,首先我们得安装 npm,怎么安装?其实只要你安装了 node,那便相当于安装了 npm: node下载地址:http://nodejs.cn/download/ 由于 ...

  3. 禁止WPS2019开机自启动

    最近开机发现WPS总是自己启动,导致开机速度会慢5s左右,从网上找了很多办法都没用,包括运行+msconfig,启动项里面没有WPS:杀毒软件自启动管理里面也没有找到WPS,百度了一圈也没有找到任何有 ...

  4. 用SQL将JSON数据输出表值数据

    自己练手写了一个将JSON数据输出成表值数据的存储过程 存储过程代码 CREATE PROC Proc_JsonConvertTable(@JSON VARCHAR(MAX)) AS --JSON测试 ...

  5. ASP.NET Core 共享第三方依赖库部署的Bug(*.deps.json on 2.2.0 or 4.6.0 版本)

    背景: I try to put the Microsoft.*.dll and System.*.dll togather to a new folder.以便把(第三方或)系统的和应用的dll分开 ...

  6. Identity Server 4 - Hybrid Flow - MVC客户端身份验证

    预备知识 可能需要看一点点预备知识 OAuth 2.0 不完全简介: https://www.cnblogs.com/cgzl/p/9221488.html OpenID Connect 不完全简介: ...

  7. 消除点击连接或者按钮或者执行onclick事件时出现的边框

    css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -w ...

  8. python接口自动化（十一）--发送post【data】（详解）

    简介 前面登录博客园的是传 json 参数,由于其登录机制的改变没办法演示,然而在工作中有些登录不是传 json 的,如 jenkins 的登录,这里小编就以jenkins 登录为案例,传 data ...

  9. NormalDialogFragmentDemo【普通页面的DialogFragment】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 该Demo主要演示DialogFragment作为普通页面,显示全屏和状态栏下方的效果以及动画效果. 效果图 代码分析 @Overr ...

  10. 行为驱动：Cucumber + Selenium + Java(五) - 使用maven来实现cucumber测试和报告

    在上一篇中,我们介绍了Selenium + Cucumber + Java框架下的测试用例参数化/数据驱动,这一篇我们来使用maven去搭建cucumber框架以及实现测试报告. 5.1 为什么要用m ...