css - How do i fix my text showing through my header while scrolling?

Question

Welcome To Ask or Share your Answers For Others

css - How do i fix my text showing through my header while scrolling?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - How do i fix my text showing through my header while scrolling?

I am working on a project for school but i ran intro a problem. As you can see my text goes through my header, but i need it to go underneath so it goes invisible while scrolling. But i cant figure out how to make it go away.

Problem

Would be amazing if anyone knows how to fix it I'd appreciate

My codes :

header {
    position: fixed;
    width: 100%;
    height: var(--heading-height);
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/
.sticky + .content {
  padding-top: 102px;
}

 header::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 6em;
    width: 100%;
    height: calc(var(--heading-height) + 10em);
    z-index: -1;
    transform: skewY(-3.5deg);
    background: 
        linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
        url(logo.gif) repeat,
        linear-gradient(#4e4376, #2b5876);
        background-image: 10px;
    background-size: contain;
    border-bottom: .2em solid #fff;
}

h1 {
    font-size: calc(2.8em + 2.6vw);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 10rem 0 0 4.5rem;
    text-shadow: .022em .022em .022em #111;
    color: #fff;
}

main {
    padding: calc(var(--heading-height) + 1.5vw) 4em 0;
}

p {
    font-size: calc(2em + .25vw);
    font-weight: 400;
    line-height: 2;
    margin-bottom: 1.5em;
    color: #fcfcfc;
}

#seriesQuiz {
    border-radius: 25px;
    border: 2px solid;
    border-color: white;
    background-color: black;
    padding: 7%;
}

#seriesGames {
    border-radius: 25px;
    border: 2px solid;
    border-color: white;
    background-color: black;
    padding: 7%;
  position:   center;
}

#seriesGamesTekst, #seriesQuizTekst {
    font-size: 20px;
    border-radius: 1px;
    border: 2px solid;
    border-color: white;
    background-color: black;
    padding: 6%;
    position: relative;
    top: -180px;
  
}

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>LM Quizzie</title>
      <link rel= "stylesheet" href="indexstyle.css">
      <script src="indexscript.js" defer></script>
  </head>
  <body>
    <header class="header">
        <h1>LM Quizzie</h1>
    </header>

    <style>
        div {
          border: 1px solid black;
          padding-top: 5px;
          padding-bottom: 100px;

          width: 300px;

          margin-top: 600px;
          margin-left: 200px;
        }

        #seriesQuiz {
          background-image: url('netflix4.png');
          background-size: cover;
          background-position: center;
          
        }
        #seriesGames {
          background-image: url('games.png');
          background-size: cover;
          background-position: center;
          
        }
        
    </style>
  </head>
  <body>
      <h2>-</h2>
      
      <div id="seriesQuiz"><p id="seriesQuizTekst">Neem de quiz die gaat over series.</p>
        <script type="text/javascript">
          function naarQuiz1() {
              document.getElementsByClassName("button").onclick = function () {
                  link.href = "https://86613.ict-lab.nl/quizz/Quizz/quiz2.html";
              };
          }
          </script>
      
          <a href="https://86613.ict-lab.nl/quizz/Quizz/quiz.html" class="button" id="link">
              <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Neem de quiz</a>
              <script type="text/javascript">
          function naarQuiz1() {
              document.getElementsByClassName("button1").onclick = function () { Neem de quizz
                  link.href = "https://86613.ict-lab.nl/quizz/Quizz/quiz2.html";
              };
          }
          </script>
      
      </div>
      <div id="seriesGames"><p id="seriesGamesTekst">Neem de quiz die gaat over games.</p>
       <script type="text/javascript">
          function naarQuiz1() {
              document.getElementsByClassName("button").onclick = function () {
                  link.href = "https://86613.ict-lab.nl/quizz/Quizz/quiz2.html";
              };
          }
          </script>
      
          <a href="https://86613.ict-lab.nl/quizz/Quizz/quiz2.html" class="button1" id="link">
              <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Neem de quiz</a> 
              <script type="text/javascript">
          function naarQuiz1() {
              document.getElementsByClassName("button1").onclick = function () {
                  link.href = "https://86613.ict-lab.nl/quizz/Quizz/quiz2.html";
              };
  </body>
</html>

question from:https://stackoverflow.com/questions/65877893/how-do-i-fix-my-text-showing-through-my-header-while-scrolling

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:22:20+0000

So you have a positioning problem which can be fixed with the CSS z-index property.

You can set the header to have a high z-index which would make it show above everything unless you set an element to have a higher z-index.

.header {
  z-index: 999;
}

In your case I think the z-index on the header would be best (I've targeted the class .header as if you were to have more elements you wouldn't want them all to be at a high z-index most likely)

You can view more about z-index values at MDN

Categories

css - How do i fix my text showing through my header while scrolling?

css - How do i fix my text showing through my header while scrolling?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags