我做了一个标题，它看起来很好，直到我决定在那里添加更多的文本，因为文本在标题后面，我不希望发生这种情况。我知道我可以在CSS文件的文本中使用top: 100px之类的东西，但我想知道一个合适的解决方案。
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet", href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
// CSS
.heading {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
我尝试使用不同的位置，但我要么再次出现这个问题，要么标题不会触及网站的一侧。
将.heading切换为position: sticky。这允许它仍然占用页面的空间，同时在用户滚动时保持在顶部。
保证金:您可以将margin: -10px;添加到.heading中，以允许它仍然触摸屏幕的边缘。然后添加width: calc(100% + 20px);，这样它仍然占用整个宽度。
.heading {
top: 0;
left: 0;
position: sticky;
margin: -10px;
width: calc(100% + 20px);
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet", href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>使用position:sticky所有元素都有默认的边距和内边距，最好将所有元素的边距设置为0
* {
margin: 0
}
我们在设计的时候会有更多的控制或者你可以给有
margin:0的特定类添加margin:0
* {
margin: 0
}
.heading {
top: 0;
left: 0;
position: sticky;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
display: block
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active,
a.logo:visited,
a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active,
a.sign_in:visited,
a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active,
a.sign_up:visited,
a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" , href="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</div>
</body>
</html>