为什么文本不在 header 下方？

Question

我希望当我向下滚动时，图像上方的文字位于 header 下方，但它没有，我不知道该怎么做。我给它添加了视差效果，但文本在 header 上方，需要在 header.

下方

请告诉我问题是什么，哪里出了问题，以及如何解决。这是 html 和 css 代码：-

/*This is for links*/
a{text-decoration: none;
color: Black;}

div#sub{display: inline;
color: #339900;}

ul {list-style-type: none;
    background: #4caf50 ;
    margin: 0;
    padding: 0;
    overflow: hidden;}

li {float:left;}

li a{
    display: block;
    text-align:left;
    padding:16px;
    color: white;
    text-decoration: none;}

li a:hover {
    background-color: white;
    color: black;}
/*This is the end*/

/*This is for parallax scrolling*/
body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('images/main1.jpg');

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}
/*This is the end*/


/*This is for header*/
body {
  margin: 0;
  font-family: Arial;}

.top-container {
  background-color: white;
  padding: 0px;
  text-align: left;}

.content {
  padding-top: 14px;}

.header {
  padding: 0px 0px;
  background: #4caf50;
  color: #4caf50;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;}

.sticky + .content {
  padding-top: 64px;}
/*This is the end*/

/*This is for text*/
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 120px;}

.sub-text{ position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    font-family: apple chancery;}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body style=background:white>

<div class="top-container">
<a href="index.html"><font face="lucida handwriting" size="7">Letsavepet</font><div id="sub"><font face="lucida handwriting" size="5">.com</font></div></a>
</div>

<div class="header" id="myHeader">
  <ul>
<li><a href="news.html">News</a> </li>
<li><a href="joinus.html">Join Us</a>  </li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="aboutus.html">About Us</a> </li>
</ul>
</div>

<div class="text"><b>LETS&nbsp;SAVE&nbsp;PETS</b></div>
<div class="sub-text"><b>We&nbsp;need&nbsp;you&nbsp;in&nbsp;this&nbsp;mission !</b></div>

<div class="parallax"></div>

<div class="content" style="height:100%;background-color:white;">

<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.

<h2>Helping to save animals</h2>

Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
<hr />
<center>Find us on <a id="link" href="https://www.facebook.com/letsavepet/" target="_blank">
<img src="images/facebook.jpg" width="20" height="20" /></a></center><hr />
<center><pre><font size="3">All Right Reserved&reg;   Copyright&copy;</font></pre></center>
</div>

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

</body>
</html>

Answer 1

类似这样的东西可能对你有用：

CSS

/*This is for links*/
a{text-decoration: none;
color: Black;}

div#sub{display: inline;
color: #339900;}

ul {list-style-type: none;
    background: #4caf50 ;
    margin: 0;
    padding: 0;
    overflow: hidden;}

li {float:left;}

li a{
    display: block;
    text-align:left;
    padding:16px;
    color: white;
    text-decoration: none;}

li a:hover {
    background-color: white;
    color: black;}
/*This is the end*/

/*This is for parallax scrolling*/
body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('images/main1.jpg');

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}
/*This is the end*/


/*This is for header*/
body {
  margin: 0;
  font-family: Arial;}

  .header {
  padding: 0px 0px;
  background: #4caf50;
  color: #4caf50; z-index:100}

.top-container {
  background-color: white;
  padding: 0px;
  text-align: left;}

.content {
  padding-top: 14px;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;}

.sticky + .content {
  padding-top: 64px;}
/*This is the end*/

/*This is for text*/
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 120px;}

.sub-text{ position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 40px;
    font-family: apple chancery;}

我为 .header 应用了 100 的 z-index。

Answer 2

将 z-index 添加到您的 .text 和 .subtext。这会将文本放在 header.

下

    .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 120px;
    z-index: -1;
    }

   .sub-text {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    font-family: apple chancery;
    z-index: -2;
    }

        window.onscroll = function() {
            myFunction()
        };

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
            if (window.pageYOffset >= sticky) {
                header.classList.add("sticky");
            } else {
                header.classList.remove("sticky");
            }
        }

    /*This is for links*/
    
    a {
        text-decoration: none;
        color: Black;
    }
    
    div#sub {
        display: inline;
        color: #339900;
    }
    
    ul {
        list-style-type: none;
        background: #4caf50;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        text-align: left;
        padding: 16px;
        color: white;
        text-decoration: none;
    }
    
    li a:hover {
        background-color: white;
        color: black;
    }
    /*This is the end*/
    /*This is for parallax scrolling*/
    
    body,
    html {
        height: 100%;
    }
    
    .parallax {
        /* The image used */
        background-image: url('images/main1.jpg');
        /* Full height */
        height: 100%;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
    
    @media only screen and (max-device-width: 1024px) {
        .parallax {
            background-attachment: scroll;
        }
    }
    /*This is the end*/
    /*This is for header*/
    
    body {
        margin: 0;
        font-family: Arial;
    }
    
    .top-container {
        background-color: white;
        padding: 0px;
        text-align: left;
    }
    
    .content {
        padding-top: 14px;
    }
    
    .header {
        padding: 0px 0px;
        background: #4caf50;
        color: #4caf50;
    }
    
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    .sticky+.content {
        padding-top: 64px;
    }
    /*This is the end*/
    /*This is for text*/
    
    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 120px;
        z-index: -2;
    }
    
    .sub-text {
        position: absolute;
        top: 63%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 40px;
        font-family: apple chancery;
        z-index: -1;
    }

<body>

    <div class="top-container">
        <a href="index.html">
            <font face="lucida handwriting" size="7">Letsavepet</font>
            <div id="sub">
                <font face="lucida handwriting" size="5">.com</font>
            </div>
        </a>
    </div>

    <div class="header" id="myHeader">
        <ul>
            <li><a href="news.html">News</a> </li>
            <li><a href="joinus.html">Join Us</a> </li>
            <li><a href="gallery.html">Gallery</a> </li>
            <li><a href="aboutus.html">About Us</a> </li>
        </ul>
    </div>

    <div class="text"><b>LETS&nbsp;SAVE&nbsp;PETS</b></div>
    <div class="sub-text"><b>We&nbsp;need&nbsp;you&nbsp;in&nbsp;this&nbsp;mission !</b></div>

    <div class="parallax"></div>

    <div class="content" style="height:100%;background-color:white;">

        <h1><u>Saving a life is easier than you think.</u></h1>
        <p>
            <font size="5">
                “You can do it!” Every day, we say those four magical words to people around the globe who want to help animals in need but are unsure of their abilities. With some friendly encouragement and guidance, you’ll be amazed at what you can accomplish.

                <h2>Helping to save animals</h2>

                Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just what it is going to take — every person reading this article committing to do just a little bit to reach this goal. Sure, many of us think we can’t make
                a difference for one reason or another, but the truth is that no matter how little time, money or experience you have, you can still save an animal’s life. It’s easier than you think, and makes you feel good, too.
                <br /> <br /> We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of homeless animals. They’re
                counting on us — and we know <b>you can do it!
</b></font>
        </p>
        <hr />
        <center>Find us on
            <a id="link" href="https://www.facebook.com/letsavepet/" target="_blank">
                <img src="images/facebook.jpg" width="20" height="20" /></a>
        </center>
        <hr />
        <center><pre><font size="3">All Right Reserved&reg;   Copyright&copy;</font></pre></center>
    </div>


</body>

Answer 3

简单。只需将 z-index: 100 添加到 class .sticky

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100; /*like this*/
}

你看（另外img背景我换了，你可以无视）

/*This is for links*/
a{text-decoration: none;
color: Black;}

div#sub{display: inline;
color: #339900;}

ul {list-style-type: none;
    background: #4caf50 ;
    margin: 0;
    padding: 0;
    overflow: hidden;}

li {float:left;}

li a{
    display: block;
    text-align:left;
    padding:16px;
    color: white;
    text-decoration: none;}

li a:hover {
    background-color: white;
    color: black;}
/*This is the end*/

/*This is for parallax scrolling*/
body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('https://picsum.photos/1800/1600');
    

    /* Full height */
    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
    .parallax {
        background-attachment: scroll;
    }
}
/*This is the end*/


/*This is for header*/
body {
  margin: 0;
  font-family: Arial;}

.top-container {
  background-color: white;
  padding: 0px;
  text-align: left;}

.content {
  padding-top: 14px;}

.header {
  padding: 0px 0px;
  background: #4caf50;
  color: #4caf50;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.sticky + .content {
  padding-top: 64px;}
/*This is the end*/

/*This is for text*/
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 120px;}

.sub-text{ position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    font-family: apple chancery;}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body style=background:white>

<div class="top-container">
<a href="index.html"><font face="lucida handwriting" size="7">Letsavepet</font><div id="sub"><font face="lucida handwriting" size="5">.com</font></div></a>
</div>

<div class="header" id="myHeader">
  <ul>
<li><a href="news.html">News</a> </li>
<li><a href="joinus.html">Join Us</a>  </li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="aboutus.html">About Us</a> </li>
</ul>
</div>

<div class="text"><b>LETS&nbsp;SAVE&nbsp;PETS</b></div>
<div class="sub-text"><b>We&nbsp;need&nbsp;you&nbsp;in&nbsp;this&nbsp;mission !</b></div>

<div class="parallax"></div>

<div class="content" style="height:100%;background-color:white;">

<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.

<h2>Helping to save animals</h2>

Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
<hr />
<center>Find us on <a id="link" href="https://www.facebook.com/letsavepet/" target="_blank">
<img src="images/facebook.jpg" width="20" height="20" /></a></center><hr />
<center><pre><font size="3">All Right Reserved&reg;   Copyright&copy;</font></pre></center>
</div>

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

</body>
</html>

为什么文本不在 header 下方？

Why is the text not going under the header?

html

css

parallax