Question

我需要你的帮助
我的代码有一个奇怪的错误。

问题在于，指向“ home”的内部链接和指向“页脚”的内部链接不起作用，而其他链接则正常。
但是，当我删除颜色：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>

谢谢：）

Answer 1

这是一个非常简单的问题，

请删除

顶部：0；

您的.header类的财产。

和：

底部：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;
}

当我更改其颜色时，内部链接不起作用

1 个答案: