时间戳

首页 > 解决方案 > 如何修复滚动时通过标题显示的文本？

css - 如何修复滚动时通过标题显示的文本？

问题描述

我正在为学校做一个项目，但我遇到了一个问题。正如你所看到的，我的文本通过我的标题，但我需要它在下面，所以它在滚动时不可见。但我不知道如何让它消失。

问题

如果有人知道如何解决它会很棒，我将不胜感激

我的代码：

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>

标签： css

解决方案

所以你有一个定位问题，可以用 CSSz-index属性解决。

您可以将 设置header为具有 high z-index，这将使其显示在所有内容之上，除非您将元素设置为具有更高的z-index。

.header {
  z-index: 999;
}

在你的情况下，我认为标题上的 z-index 是最好的（我已经针对类 .header ，就好像你有更多的元素，你不希望它们最有可能处于高 z-index ）

您可以在MDN上查看有关z-index值的更多信息

推荐阅读