在这个网站上，我希望导航栏在向下滚动时粘在页面顶部。我不知道为什么我的网站允许这种情况发生（我有位置：粘性，顶部：0并且溢出不设置为任何东西）。
如果有人愿意提供帮助，请提供帮助。提前谢谢。
这是html文件和css文件：
{-webkit-font-smoothing: antialiased;}
body {
margin: 0%;
font-family: Arial;
scroll-behavior: smooth;
background: linear-gradient(#e6e6e6, white);
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: white;
color: grey;
z-index: 2;
}
.card {
float: left;
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.card p {
background-color: white;
float: left;
box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card p:hover {
box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}
.card a {
float: left;
color: grey;
text-align: center;
text-decoration: none;
display: block;
border-radius: 5px;
padding-left: 1%;
padding-right: 1%;
padding-top: 0.7%;
padding-bottom: 0.7%;
transition: 0.3s;
}
.card a:hover {
color: #3399ff;
box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
background-color: #fbfbfb;
}
.navigation {
list-style-type: none;
position: -webkit-sticky;
position: sticky;
top: 0px;
width: 100%;
background-color: white;
box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
z-index: 1;
}
li a, .dropbtn {
float: left;
display: block;
text-align: center;
padding: 1%;
color: grey;
text-decoration: none;
transition: 0.5s;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #f2f2f2;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
min-width: 1%;
box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
border-radius: 0px 5px 5px 5px;
}
.dropdown-content a {
color: grey;
padding: 10%;
width: 80%;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
background-color: white;
}
.active {
background-color: #3399ff;
color: white;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
.about a {
float: right;
position: relative;
}
br.clearLeft {
clear: left;
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Testing</title>
</head>
<body>
<div class = "header";>Website</div>
<div class = "navigation";>
<li><a class = "active" href = "#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class = "dropdown">
<a class = "dropbtn">Dropdown</a>
<div class = "dropdown-content">
<a href = "#link1">Link 1</a>
<a href = "#link2">Link 2</a>
<a href = "#link3">Link 3</a>
</div>
</li>
<li class = "about";><a href="#about">About</a></li>
<br class="clearLeft" />
</div>
<div class = "card";>
<p>
Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
<br />
<br />
<a href = "#link";>Link</a>
</p>
<p>
Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
<br />
<br />
<a href = "#link";>Link</a>
</p>
<p>
Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
<br />
<br />
<a href = "#link";>Link</a>
</p>
<p>
Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
<br />
<br />
<a href = "#link";>Link</a>
</p>
<p>
Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
<br />
<br />
<a href = "#link";>Link</a>
</p>
</div>
</body>
</html>
答案 0 :(得分：1)
<强>更新
float: left的{{1}}属性让他们的父.card > p无法包裹它们，因此.card的高度不会扩展，所以高度也不会.card，粘性属性的影响无法显示。
body{-webkit-font-smoothing: antialiased;}
body {
margin: 0%;
font-family: Arial;
scroll-behavior: smooth;
background: linear-gradient(#e6e6e6, white);
// Add--------
height: auto;
overflow-y: scroll;
}
.header {
position: relative;
left: 0px;
right: 0px;
top: 0px;
font-size: 187%;
text-align: left;
padding: 1.5%;
background-color: white;
color: grey;
z-index: 2;
}
.card {
overflow: hidden; <-- to wrap the p elements.
position: relative;
margin-right: 2%;
margin-left: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.card p {
background-color: white;
float: left;
box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
transition: 0.3s;
}
.card p:hover {
box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}
.card a {
float: left;
color: grey;
text-align: center;
text-decoration: none;
display: block;
border-radius: 5px;
padding-left: 1%;
padding-right: 1%;
padding-top: 0.7%;
padding-bottom: 0.7%;
transition: 0.3s;
}
.card a:hover {
color: #3399ff;
box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
background-color: #fbfbfb;
}
.navigation {
list-style-type: none;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
background-color: white;
box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
z-index: 1;
}
li a, .dropbtn {
float: left;
display: block;
text-align: center;
padding: 1%;
color: grey;
text-decoration: none;
transition: 0.5s;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #f2f2f2;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2f2f2;
min-width: 1%;
box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
border-radius: 0px 5px 5px 5px;
}
.dropdown-content a {
color: grey;
padding: 10%;
width: 80%;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
background-color: white;
}
.active {
background-color: #3399ff;
color: white;
}
.active:hover {
background-color: #80bfff;
transition: 0.5s;
}
.about a {
float: right;
position: relative;
}
br.clearLeft {
clear: left;
}