2017-12-18 43 views
0

嘿傢伙我不知道我的代碼有什麼問題。但page3溢出page2。但我需要他們一個接一個來。我複製粘貼的page2,只是改變了類名。看不到第三個div。溢出另一個

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

+2

如果您希望元素互相跟隨 - 在頁面的自然流動 - 那麼就不要使用絕對定位。它們會自然地出現在彼此之後。 –

+0

的作品,但在這種情況下,我不能使用頂部或左側居中我的主要內容。第2頁上的內容將其從fisrt頁面的頂部開始。 –

+0

如果你正在談論'.main-content',那麼你仍然可以絕對定位。這是一個塊,你*不需要在自然流動。 –

回答

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>

+0

這就是它的人。非常感謝。有效。 –

+0

@Rufat沒問題:)確保接受它。歡呼 – 2017-12-18 10:38:56

+0

@RufatAliyev你什麼意思跳起來了?如果您指的是摘錄,請不要介意只在整頁上查看它並嘗試調整大小。而且它跳躍了,因爲你在第2頁和第3頁有一個很大的填充符。 – 2017-12-18 10:41:32