如何停止重叠两个div？

时间：2019-03-22 18:27:31

标签： html css html5 twitter-bootstrap

这是我的总代码。有两个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 output 2nd example of output

1 个答案:

答案 0 :(得分：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>

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

相关问题
最新问题