Question

我希望当我向下滚动时，图像上方的文字会在标题下面，但它不会，我不知道该怎么做。我添加了视差效果，但是文本位于标题之上，需要在标题下面。

请告诉我问题是什么，在哪里以及如何解决。这是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;}

我将z-index为100应用于.header。

Answer 2

将z-index添加到.text和.subtext。这会将文字放在标题下。

    .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添加到课程.sticky

即可

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

看（另外，我改变了img背景，你可以忽略它）

＆＃13;

/*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;}

＆＃13;

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

＆＃13;

为什么文字不在标题下？

3 个答案: