看不到第三个div。溢出另一个

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

嘿家伙我不知道我的代码有什么问题。但是page3溢出了page2。但我需要他们一个接一个地来。我复制粘贴的page2，只是更改了类名。

.main {
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url("landbackground2.jpeg");
  background-size: cover;
  background-position: center bottom;
}

.overlay {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.main-content {
  padding: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.icon {
  padding: 7px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font-size: 20px;
  float: right;
}

.logo {
  font-size: 20px;
  display: inline-block;
}

.header {
  z-index: 100;
  width: 100%;
  position: fixed;
  padding: 20px 20px;
}


#main-h1 {
  font-size: 50px;
  font-weight: bold;
  font-family: 'Indie Flower', cursive;
}



/* NOTE: PAGE 2 */


.page2 {
  position: absolute;
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url("page2.jpg");
  background-size: cover;
  background-position: center;

}

.page2-content {
  padding: 20px 30px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}

a {
  text-decoration: none;
  padding: 10px;
  border: 1px solid white;
  border-radius: 5px;
  color: white;
  transition: 0.5s;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: white 0px 0px 20px;
}

.bg-attach {
  background-attachment: fixed;
}

.page3 {
  position: absolute;
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url(".jpg");
  background-size: cover;
  background-position: center;
}



.fuck {
  position: relative;
  display: block;
  height: 100vh;
  background: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\bootstrap-4.0.0-beta.2\dist\css\bootstrap.min.css">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\css\font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\landing pages\landpage.css">
  <title>Landing Page</title>
</head>
<body>
  <div class="main">
    <div class="overlay">
      <header>
        <div class="header">
          <p class="logo">Road trip</p>
          <i class="fa fa-bars icon" aria-hidden="true"></i>
        </div>
      </header>
      <div class="main-content">
        <h1 id="main-h1">This is Road Trip</h1>
      </div>
    </div>
  </div>

  <div class="page2">
    <div class="overlay">
      <div class="page2-content">
        <h1 >This is Road Trip</h1>
        <h2>21.12.2112</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p>
        <div class="btn">
          <a href="#">Learn more . . .</a>
        </div>
      </div>
    </div>
  </div>
  <div class="page3">
    <div class="overlay">
      <div class="page3-content">
        <h1 >This is Road Trip</h1>
        <h2>21.12.2112</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p>
        <div class="btn">
          <a href="#">Learn more . . .</a>
        </div>
      </div>
    </div>
  </div>








  </body>
</html>
html css overflow
1个回答
0
投票

.main {
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url("landbackground2.jpeg");
  background-size: cover;
  background-position: center bottom;
}

.overlay {
  position:relative;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.main-content {
  padding: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.icon {
  padding: 7px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font-size: 20px;
  float: right;
}

.logo {
  font-size: 20px;
  display: inline-block;
}

.header {
  z-index: 100;
  width: 100%;
  position: fixed;
  padding: 20px 20px;
}


#main-h1 {
  font-size: 50px;
  font-weight: bold;
  font-family: 'Indie Flower', cursive;
}



/* NOTE: PAGE 2 */


.page2 {
  position:relative;
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url("page2.jpg");
  background-size: cover;
  background-position: center;

}

.page2-content {
  position:absolute;
  padding: 20px 30px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}
.page3-content {
  position:absolute;
  padding: 20px 30px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

}

a {
  text-decoration: none;
  padding: 10px;
  border: 1px solid white;
  border-radius: 5px;
  color: white;
  transition: 0.5s;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: white 0px 0px 20px;
}

.bg-attach {
  background-attachment: fixed;
}

.page3 {
position:relative;
  color: white;
  width: 100%;
  height: 100vh;
  background-image: url(".jpg");
  background-size: cover;
  background-position: center;
}



.fuck {
  position: relative;
  display: block;
  height: 100vh;
  background: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\bootstrap-4.0.0-beta.2\dist\css\bootstrap.min.css">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\css\font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <link rel="stylesheet" href="C:\Users\Admin\Desktop\Labby\landing pages\landpage.css">
  <title>Landing Page</title>
</head>
<body>
  <div class="main">
    <div class="overlay">
      <header>
        <div class="header">
          <p class="logo">Road trip</p>
          <i class="fa fa-bars icon" aria-hidden="true"></i>
        </div>
      </header>
      <div class="main-content">
        <h1 id="main-h1">This is Road Trip</h1>
      </div>
    </div>
  </div>

  <div class="page2">
    <div class="overlay">
      <div class="page2-content">
        <h1 >This is Road Trip</h1>
        <h2>21.12.2112</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p>
        <div class="btn">
          <a href="#">Learn more . . .</a>
        </div>
      </div>
    </div>
  </div>
  <div class="page3">
    <div class="overlay">
      <div class="page3-content">
        <h1 >This is Road Trip</h1>
        <h2>21.12.2112</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nam, nihil blanditiis.</p>
        <div class="btn">
          <a href="#">Learn more . . .</a>
        </div>
      </div>
    </div>
  </div>








  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.