Как перестать перекрывать два div? - PullRequest
Новая
       6

Как перестать перекрывать два div?

1 голос
/ 22 марта 2019

Это мой общий код. Есть два дел. Когда я прокручиваю страницу вниз, 2-е деление пересекается с 1-м, и оно опускается ниже до 1-го деления. Как вы можете видеть на скриншоте, изображение и абзац находятся над 1-ым div.bou я хочу, чтобы два div'а были отделены друг от друга, а 2-й должен правильно сидеть на своем месте. Я складываю в этой части. Пожалуйста, помогите мне ... спасибо заранее 

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

1 Ответ

2 голосов
/ 22 марта 2019

Если я правильно понял, вы хотите, чтобы фон каждого раздела прокручивался вместе с контентом?Вот, пожалуйста: 

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>

Я удалил код частицы, поскольку он не имеет отношения к вопросу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...