如何停止重叠两个div？

问题描述 投票：1回答：1

这是我的总代码。有两个div。当我向下滚动页面时，第二个div与第一个div重叠，它向下到第一个div。正如你在屏幕截图中看到的那样，图像和段落在第一个div上。但是我希望两个div彼此分开，而第二个div正确地坐在它自己的位置。我在这部分堆叠。请帮帮我......提前谢谢

body {
  overflow-x: hidden;
}

#particle {
  background-color: blue;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 550px;
}

#overlay {
  position: relative;
}

#inner-banner-image {
  padding-top: 12%;
  width: 80%;
  margin: auto;
}

#banner-content {
  position: relative;
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
  margin-bottom: 12%;
  background-color: rgba(0, 0, 0, 0.7);
  max-width: 520px;
  margin-top: 5%;
}

#button {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
  padding: 10px 16px;
  font-size: 15px;
  width: 155px;
  border-radius: 6px;
}

.about {
  background-color: #C57ED3;
  padding-top: 100px;
  color: #490D40;
  height: 510px;
  text-align: center;
}

p {
  padding: 50px 50px;
  text-align: center;
  justify-content: center;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!--jQuery library-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <!--Latest compiled and minified JavaScript-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="resume.css" type="text/css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

  <title>
    RESUME</title>
</head>

<body>
  <div id="particle"></div>
  <div id="overlay">
    <div id="inner-banner-image">
      <center>
        <div id="banner-content">
          <marquee bgcolor="#c9302c" behavior="alternate">
            <font color="white">WELCOME TO OUR WEBSITE</marquee>
          <h1>We sell lifestyle</h1>
          <p>Flat 40% OFF on premium brands </p>
          <div id="button">
            <a href="products.php">Shop Now</a>
          </div>
        </div>
      </center>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="p.js"></script>


  <div class="about">
    <div class="row">
      <div class="col-12 col-md-4">
        <img src="p.jpg" class="img-thumbnail">
      </div>
      <div class="col-12 col-md-8">
        <h3>Main Description</h3>
        <p>Roll on the floor purring your whiskers off intrigued by the shower burrow under covers, and play time, rub face on everything, intently sniff hand, or pelt around the house and up and down stairs chasing phantoms. Attack feet. Damn that dog shake
          treat bag under the bed drink water out of the faucet for lick butt love to play with owner's hair tie. Swat at dog give attitude.</p>

        <div class="m">
          <a class="btn" id="download" href="#">
            <i class="fas fa-download">Download Resume</i>
          </a>
        </div>
        <div class="middle">
          <a class="btn" id="b" href="#">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a class="btn" id="c" href="#">
            <i class="fab fa-twitter"></i>
          </a>
          <a class="btn" id="d" href="#">
            <i class="fab fa-linkedin-in"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1st example of output2nd example of output

html css html5 twitter-bootstrap
1个回答
2
投票

如果我理解正确，您希望每个部分的背景与内容一起滚动？干得好：

body {
  overflow-x: hidden;
}

#particle {
  position: fixed;
  height: 100%;
  width: 100%;
}

#overlay {
  background-color: blue;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 550px;
}


#inner-banner-image {
  padding-top: 70px;
  width: 80%;
  margin: auto;
}

#banner-content {
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
  margin-bottom: 12%;
  background-color: rgba(0, 0, 0, 0.7);
  max-width: 520px;
  margin-top: 5%;
}

#button {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
  padding: 10px 16px;
  font-size: 15px;
  width: 155px;
  border-radius: 6px;
}

.about {
  background-color: #C57ED3;
  padding-top: 100px;
  color: #490D40;
  height: 510px;
  text-align: center;
}

p {
  padding: 50px 50px;
  text-align: center;
  justify-content: center;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!--jQuery library-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <!--Latest compiled and minified JavaScript-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="resume.css" type="text/css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

  <title>
    RESUME</title>
</head>

<body>
  <div id="particle"></div>
  <div id="overlay">
    <div id="inner-banner-image">
      <center>
        <div id="banner-content">
          <marquee bgcolor="#c9302c" behavior="alternate">
            <font color="white">WELCOME TO OUR WEBSITE</marquee>
          <h1>We sell lifestyle</h1>
          <p>Flat 40% OFF on premium brands </p>
          <div id="button">
            <a href="products.php">Shop Now</a>
          </div>
        </div>
      </center>
    </div>
  </div>

  <div class="about">
    <div class="row">
      <div class="col-12 col-md-4">
        <img src="p.jpg" class="img-thumbnail">
      </div>
      <div class="col-12 col-md-8">
        <h3>Main Description</h3>
        <p>Roll on the floor purring your whiskers off intrigued by the shower burrow under covers, and play time, rub face on everything, intently sniff hand, or pelt around the house and up and down stairs chasing phantoms. Attack feet. Damn that dog shake
          treat bag under the bed drink water out of the faucet for lick butt love to play with owner's hair tie. Swat at dog give attitude.</p>

        <div class="m">
          <a class="btn" id="download" href="#">
            <i class="fas fa-download">Download Resume</i>
          </a>
        </div>
        <div class="middle">
          <a class="btn" id="b" href="#">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a class="btn" id="c" href="#">
            <i class="fab fa-twitter"></i>
          </a>
          <a class="btn" id="d" href="#">
            <i class="fab fa-linkedin-in"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我删除了粒子代码，因为它与问题无关。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.