我怎样才能阻止我的 header 溢出 lorem https://jsfiddle.net/joshbjs/r9scauqe/3/
how can i stop my header overflowing with lorem https://jsfiddle.net/joshbjs/r9scauqe/3/
.box {
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
body {
background-color: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 201</title>
<link rel="stylesheet" href="css/202.css">
</head>
<body>
<div class="box">
this is a header
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
</body>
</html>
我遇到的问题是我的 lorem 溢出到我的 header/navbar。
here is a screenshot in chrome
here is a screenshot of my html and css code
这是因为您在页眉上使用了 position: fixed; 和位置属性，因此该框将与其他元素重叠。除非你有一个你没有在问题中指定的原因，否则你可以删除这些属性。
有关 position 的更多信息，请参阅此处：https://www.w3schools.com/cssref/pr_class_position.asp
.box {
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
background-color: cornflowerblue;
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
body {
background-color: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 201</title>
<link rel="stylesheet" href="css/202.css">
</head>
<body>
<div class="box">
this is a header
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
</body>
</html>
.box{
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
position: sticky;
background: cornflowerblue;
top: 0;
}
body{
background: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!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>
</head>
<body>
<div class="box">
This is a header
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi amet dicta laborum cupiditate tempora suscipit, magni vel eligendi inventore ex nihil doloremque porro quisquam laboriosam similique fugiat. Consectetur, enim!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at nesciunt earum odio id, ad praesentium. Minima culpa ducimus voluptate reiciendis qui! Accusantium, corporis officia! Quasi accusantium facere excepturi delectus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit mollitia corrupti iure nulla tempore laboriosam laudantium incidunt, magnam veniam exercitationem commodi quos eaque harum beatae libero provident! Numquam, culpa fugiat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur molestias hic deleniti nobis sint iste minus at debitis similique, doloribus sit, rerum dicta eius voluptas corrupti laboriosam repellendus recusandae aliquam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, harum a! Recusandae illum ipsa iste voluptatum cupiditate, autem, rerum molestias facilis blanditiis minus, nesciunt incidunt. Amet dicta harum perferendis autem!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi amet dicta laborum cupiditate tempora suscipit, magni vel eligendi inventore ex nihil doloremque porro quisquam laboriosam similique fugiat. Consectetur, enim!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at nesciunt earum odio id, ad praesentium. Minima culpa ducimus voluptate reiciendis qui! Accusantium, corporis officia! Quasi accusantium facere excepturi delectus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit mollitia corrupti iure nulla tempore laboriosam laudantium incidunt, magnam veniam exercitationem commodi quos eaque harum beatae libero provident! Numquam, culpa fugiat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur molestias hic deleniti nobis sint iste minus at debitis similique, doloribus sit, rerum dicta eius voluptas corrupti laboriosam repellendus recusandae aliquam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, harum a! Recusandae illum ipsa iste voluptatum cupiditate, autem, rerum molestias facilis blanditiis minus, nesciunt incidunt. Amet dicta harum perferendis autem!
</p>
</body>
</html>
从 .box 中删除 position: fixed;
如果你真的需要，那么使用
.box{
position: sticky;
background: cornflowerblue;
top: 0;
}
注意：请尝试 post 您的代码。然后我们需要把所有的代码都敲进去调试一下。
.box {
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
body {
background-color: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 201</title>
<link rel="stylesheet" href="css/202.css">
</head>
<body>
<div class="box">
this is a header
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
</body>
</html>
我遇到的问题是我的 lorem 溢出到我的 header/navbar。
here is a screenshot in chrome
here is a screenshot of my html and css code
这是因为您在页眉上使用了 position: fixed; 和位置属性，因此该框将与其他元素重叠。除非你有一个你没有在问题中指定的原因，否则你可以删除这些属性。
有关 position 的更多信息，请参阅此处：https://www.w3schools.com/cssref/pr_class_position.asp
.box {
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
background-color: cornflowerblue;
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
body {
background-color: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 201</title>
<link rel="stylesheet" href="css/202.css">
</head>
<body>
<div class="box">
this is a header
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente fugiat repudiandae excepturi voluptatibus sunt ipsum provident? Blanditiis natus minus sint in architecto dolorum ab, quisquam cupiditate? Aspernatur blanditiis repellendus ullam?</p>
</body>
</html>
.box{
border-bottom: 10px solid #ccc;
padding: 20px;
color: indianred;
position: sticky;
background: cornflowerblue;
top: 0;
}
body{
background: cornflowerblue;
margin: 0;
padding: 0;
height: 3000px;
}
<!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>
</head>
<body>
<div class="box">
This is a header
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi amet dicta laborum cupiditate tempora suscipit, magni vel eligendi inventore ex nihil doloremque porro quisquam laboriosam similique fugiat. Consectetur, enim!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at nesciunt earum odio id, ad praesentium. Minima culpa ducimus voluptate reiciendis qui! Accusantium, corporis officia! Quasi accusantium facere excepturi delectus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit mollitia corrupti iure nulla tempore laboriosam laudantium incidunt, magnam veniam exercitationem commodi quos eaque harum beatae libero provident! Numquam, culpa fugiat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur molestias hic deleniti nobis sint iste minus at debitis similique, doloribus sit, rerum dicta eius voluptas corrupti laboriosam repellendus recusandae aliquam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, harum a! Recusandae illum ipsa iste voluptatum cupiditate, autem, rerum molestias facilis blanditiis minus, nesciunt incidunt. Amet dicta harum perferendis autem!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus nisi amet dicta laborum cupiditate tempora suscipit, magni vel eligendi inventore ex nihil doloremque porro quisquam laboriosam similique fugiat. Consectetur, enim!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae at nesciunt earum odio id, ad praesentium. Minima culpa ducimus voluptate reiciendis qui! Accusantium, corporis officia! Quasi accusantium facere excepturi delectus.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit mollitia corrupti iure nulla tempore laboriosam laudantium incidunt, magnam veniam exercitationem commodi quos eaque harum beatae libero provident! Numquam, culpa fugiat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur molestias hic deleniti nobis sint iste minus at debitis similique, doloribus sit, rerum dicta eius voluptas corrupti laboriosam repellendus recusandae aliquam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, harum a! Recusandae illum ipsa iste voluptatum cupiditate, autem, rerum molestias facilis blanditiis minus, nesciunt incidunt. Amet dicta harum perferendis autem!
</p>
</body>
</html>
从 .box 中删除 position: fixed;
如果你真的需要，那么使用
.box{
position: sticky;
background: cornflowerblue;
top: 0;
}
注意：请尝试 post 您的代码。然后我们需要把所有的代码都敲进去调试一下。