我需要你的帮助
我的代码有一个奇怪的错误。
问题是指向“主页”的内部链接和指向“页脚”的内部链接不起作用，而其他的则工作正常。
但是当我从 css 的 .menu a 中删除颜色:#ffffff 时，它们都起作用了。
我不知道如何解决这个问题
有人有想法吗？
html {
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*menu fixe*/
.menu{
position: fixed;
left: 0;
bottom:60vh;
z-index: 10;
}
.menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu li{
padding: 10px;
}
.menu a{
text-decoration: none;
text-transform: uppercase;
padding: 10px;
color: #ffffff;
}
.menu a:hover{
background-color: black;
}
/*main content*/
.wrapper{
width: 60%;
margin: 0 auto;
}
/*header*/
.header{
width: 100%;
height: 100vh;
top: 0;
background-color: #D4726A;
position: sticky;
z-index: -1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
/*boxes-all*/
.box-container {
height: 100vh;
width: 100%;
}
.box-header{
height: 40vh;
width: 100vw;
position: sticky;
top: 1px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background-color: lightblue;
}
.box-content{
height: 60vh;
width: 100%;
text-align: center;
background-color: grey;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
/*boxes-each*/
.box-header-first{
background-color: #447684;
}
.box-content-first{
background-color: #0F414F;
}
.box-header-second{
background-color: #51A35F;
}
.box-content-second{
background-color: #10621E;
}
.box-header-third{
background-color: #67989A;
}
.box-content-third{
background-color: #0D4A4D;
}
/*footer*/
.footer{
height: 100vh;
width: 100%;
margin: 0;
bottom:0;
position: sticky;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
z-index: -2;
background-color: #D4A06A;
}<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
<link rel="stylesheet" type="text/css" href="sticky.css">
</head>
<body>
<div class="body">
<!-- menu fixe -->
<div class="menu">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#boxone">box one</a></li>
<li><a href="#boxtwo">box two</a></li>
<li><a href="#boxthree">box three</a></li>
<li><a href="#footer">footer</a></li>
</ul>
</nav>
</div>
<!-- contenu -->
<div class="container">
<!-- main content -->
<div class="sticky">
<!-- header -->
<div class="header" id="home">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
<!-- boxes -->
<div class="box-container" id="boxone">
<div class="box-header box-header-first">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
<div class="box-content box-content-first">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
</div>
<div class="box-container" id="boxtwo">
<div class="box-header box-header-second">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
<div class="box-content box-content-second">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
</div>
<div class="box-container" id="boxthree">
<div class="box-header box-header-third">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
<div class="box-content box-content-third">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer" id="footer">
<div class="wrapper">
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</div>
</div>
</div>
</div>
</body>
</html>谢谢你:)
最佳答案
这是一个很简单的问题，
请删除
top: 0;
.header 类中的属性。
和:
bottom: 0;
.footer 类的属性。
或复制粘贴此样式而不是您的 .header 样式
/*header*/
.header{
width: 100%;
height: 100vh;
background-color: #D4726A;
position: sticky;
z-index: -1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
关于html - 更改颜色后内部链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52918884/