'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>

the problem I am having is that my lorem is overflowing into my header/navbar.

here is a screenshot in chrome

here is a screenshot of my html and css code

htmlcsslayoutheadernavbar


Solution 1:[1]

It's because you're using position: fixed; and the positional attributes on your header, so that box is going to overlap other elements. Unless you have a reason for doing that that you didn't specify in your question, you can just remove those attributes.

See here for more info on 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>

Solution 2:[2]

.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>

remove position: fixed; from .box If you really need that then use

.box{
   position: sticky;
   background: cornflowerblue;
   top: 0;
}

NB: please try to post your code. We need to type all the code to debug then.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions