当锚点遇到fixed定位

全栈程序员-站长 • 2026年3月17日下午12:59 • 未分类 • 阅读 2

当锚点遇到fixed定位简介当点击页面的锚点时会跳转到指定 id 的元素而实际表现的是滚动条滚动使指定 id 元素对齐滚动条所处元素的顶端如果当页面上方出现 fixed 定位时将会出现锚点定位不准确的情况 1 问题重现当使用锚点时页面上方存在 fixed 定位将会出现如下情况点击目录二对应跳转内容二的锚点 DOCTYPEhtmlh

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> 
   title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; } body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; } .header { background-color: #000; opacity: .5; filter:alpha(opacity=50); height: 80px; width: 100%; position: fixed; z-index: 999; top: 0; } .section { margin-top: 100px; } ul { position: fixed; right: 40px; top: 100px; } ul li { margin-top: 10px; } ul li a { color: #000; text-decoration: none; } .container { width: 600px; margin: 0 auto; } .test { margin-top: 50px; } .test h2 { font-size: 18px; font-weight: 800; } .test .box { width: 600px; height: 200px; background-color: #F46465; }  
   style>  
   head> <body> <div class="header"> 
   div> <div class="section"> <ul> <li><a href="#test1">目录一 
   a> 
   li> <li><a href="#test2">目录二 
   a> 
   li> <li><a href="#test3">目录三 
   a> 
   li> <li><a href="#test4">目录四 
   a> 
   li>  
   ul> <div class="container"> <div class="test"> <h2 id="test1">一、内容一 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test2">二、内容二 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test3">三、内容三 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test4">四、内容四 
   h2> <div class="box"> 
   div>  
   div>  
   div>  
   div>  
   body>  
   html>

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> 
   title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; } body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; } .header { background-color: #000; opacity: .5; filter:alpha(opacity=50); height: 80px; width: 100%; position: fixed; z-index: 999; top: 0; } .section { margin-top: 100px; } ul { position: fixed; right: 40px; top: 100px; } ul li { margin-top: 10px; } ul li a { color: #000; text-decoration: none; } .container { width: 600px; margin: 0 auto; } .test { margin-top: 50px; } .test h2 { font-size: 18px; font-weight: 800; margin-top: 80px; } .test .box { width: 600px; height: 200px; background-color: #F46465; }  
   style>  
   head> <body> <div class="header"> 
   div> <div class="section"> <ul> <li><a href="#test1">目录一 
   a> 
   li> <li><a href="#test2">目录二 
   a> 
   li> <li><a href="#test3">目录三 
   a> 
   li> <li><a href="#test4">目录四 
   a> 
   li>  
   ul> <div class="container"> <div class="test"> <h2 id="test1">一、内容一 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test2">二、内容二 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test3">三、内容三 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test4">四、内容四 
   h2> <div class="box"> 
   div>  
   div>  
   div>  
   div>  
   body>  
   html>

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> 
   title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; } body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; } .header { background-color: #000; opacity: .5; filter:alpha(opacity=50); height: 80px; width: 100%; position: fixed; z-index: 999; top: 0; } .section { margin-top: 100px; } ul { position: fixed; right: 40px; top: 100px; } ul li { margin-top: 10px; } ul li a { color: #000; text-decoration: none; } .container { width: 600px; margin: 0 auto; } .test { margin-top: 50px; } .test h2 { font-size: 18px; font-weight: 800; padding-top: 80px; } .test .box { width: 600px; height: 200px; background-color: #F46465; }  
   style>  
   head> <body> <div class="header"> 
   div> <div class="section"> <ul> <li><a href="#test1">目录一 
   a> 
   li> <li><a href="#test2">目录二 
   a> 
   li> <li><a href="#test3">目录三 
   a> 
   li> <li><a href="#test4">目录四 
   a> 
   li>  
   ul> <div class="container"> <div class="test"> <h2 id="test1">一、内容一 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test2">二、内容二 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test3">三、内容三 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test4">四、内容四 
   h2> <div class="box"> 
   div>  
   div>  
   div>  
   div>  
   body>  
   html>

2.2.2、代码如下：

 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> 
   title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; } body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; } .header { background-color: #000; opacity: .5; filter: alpha(opacity=50); height: 80px; width: 100%; position: fixed; z-index: 999; top: 0; } .section { margin-top: 100px; } ul { position: fixed; right: 40px; top: 100px; } ul li { margin-top: 10px; } ul li a { color: #000; text-decoration: none; } .container { width: 600px; margin: 0 auto; } .test { margin-top: 50px; } .test h2 { font-size: 18px; font-weight: 800; padding-top: 80px; margin-top: -80px; } .test .box { width: 600px; height: 200px; background-color: #F46465; }  
   style>  
   head> <body> <div class="header"> 
   div> <div class="section"> <ul> <li><a href="#test1">目录一 
   a> 
   li> <li><a href="#test2">目录二 
   a> 
   li> <li><a href="#test3">目录三 
   a> 
   li> <li><a href="#test4">目录四 
   a> 
   li>  
   ul> <div class="container"> <div class="test"> <h2 id="test1">一、内容一 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test2">二、内容二 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test3">三、内容三 
   h2> <div class="box"> 
   div>  
   div> <div class="test"> <h2 id="test4">四、内容四 
   h2> <div class="box"> 
   div>  
   div>  
   div>  
   div>  
   body>  
   html>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/223977.html原文链接：https://javaforall.net

赞 (0)

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

netapp存储常用命令

上一篇 2026年3月17日下午12:59

时间复杂度和空间复杂度的简单讲解

下一篇 2026年3月17日下午12:59

mac 安装ll命令[通俗易懂]

mac 安装ll命令[通俗易懂]mac安装ll命令mac-bash:ll:commandnotfound在linux系统下我们经常使用ll、la命令。但在mac系统时缺没有。提示：-bash:ll:commandnotfound。这是因为ll、la不是真的命令，而是一些常用命令和参数搭配的别名。所以我们在MacOS下配置下就好了。1、跳到个人目录下面localhost:~huangfy20$cdlocalhost:~huangfy20$pwd/Users/huangfy202、打开.bash

全栈程序员-站长
2025年12月1日
7
java输出数组的方法_java怎样输出数组中的所有元素

java输出数组的方法_java怎样输出数组中的所有元素文章目录数组的输出的三种方式一维数组：1.传统的for循环方式2.foreach循环3.利用Array类中的toString方法二维数组：1.传统的for循环方式2.foreach循环3.利用Array类中的toString方法数组的输出的三种方式一维数组：定义一个数组int[]array={1,2,3,4,5};1.传统的for循环方式for(inti=0;i<array.length;i++){System.out.println(array

全栈程序员-站长
2022年10月11日
3
【《重构改善既有代码的设计》学习笔记8】重新组织数据

本篇文章的内容来自《重构改善既有代码的设计》一书学习笔记整理并且加上自己的浅显的思考总结！本篇介绍几个轻松处理数据的重构手法。1、自封装字段（Self Encapsulate Field）概述你直接访问一个字段，但与字段之间的耦合关系逐渐变得笨拙。为这个字段建立取值和设值函数，并且通过函数来访问字段。【说白了就是使用get/set方法来访问字段】private int low …

全栈程序员-站长
2022年2月27日
44
CreateFileMapping用法

CreateFileMapping的MSDN翻译和使用心得测试创建和打开文件映射的时候老是得到”句柄无效”的错误,仔细看了MSDN以后才发觉是函数认识不透,这里把相关的解释翻译出来HANDLECreateFileMapping( HANDLEhFile, //物理文件句柄 LPSECURITY_ATTRIBUTESl

全栈程序员-站长
2022年4月6日
42
Vue父组件向子组件传递参数[通俗易懂]

1、父组件projectBatchsindex.vue//使用:projectId=”this.projectId”传递参数<ProjectBatchEditref=”projectBatchEdit”:projectId=”this.projectId”@on-update=”search”></ProjectBatchEdit>importProj…

全栈程序员-站长
2022年4月7日
53
linux5432端口在哪里打开,在ubuntu上打开端口5432

linux5432端口在哪里打开,在ubuntu上打开端口5432我试图使用ufw使用sudoufwallow5432/tcp在ubuntu上打开端口5432然后我使用nmap来查看端口5432是否已打开,我得到了这个：[emailprotected]:~#sudonmap-sS-O127.0.0.1StartingNmap5.21(http://nmap.org)at2011-12-0114:28MSKNmapscan…

全栈程序员-站长
2022年6月19日
74

发表回复

关注全栈程序员社区公众号