2017-08-25 51 views
1

我有一個固定在頂部的導航欄。當滾動時,幾乎所有的東西都會在下的下導航欄,但是有一段文字在導航欄上方。 我可以強制導航欄位於最高位置,還是強制文字位於最底部?如何使導航條下的所有東西

注意:爲了觀察問題,請添加任意內容,以便您可以滾動頁面。

下面的代碼:https://jsfiddle.net/q8prw19c/1/

.caption { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #000; 
 
} 
 
.caption span.border { 
 
    color: #fff; 
 
    padding: 18px; 
 
    font-size: 3em; 
 
    letter-spacing: 10px;} 
 
.parallax { 
 
    background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg"); 
 
    height: 100%; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.topnav { 
 
\t position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    font-size: 17px; 
 
}
<div class="topnav" id="myTopnav"> 
 
\t \t <a href="#home">Home</a> 
 
\t \t <a href="#news">News</a> 
 
\t \t <a href="#contact">Contact</a> 
 
\t \t <a href="#about">About</a> 
 
\t </div> 
 
\t <div class="parallax"> 
 
\t \t <div class="caption"> 
 
     <span class="border">test</span> 
 
    </div> 
 
\t </div>

回答

0

我給了身體一個z-index爲1,你的#topnav元素的z-index爲2,這樣它就會在你添加到你網站的所有東西之上。

html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t } 
 

 
body { 
 
    z-index: 1; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #000; 
 
    
 
} 
 

 
.caption span.border { 
 
    color: #fff; 
 
    padding: 18px; 
 
    font-size: 3em; 
 
    letter-spacing: 10px; 
 
    
 
} 
 

 
.aboutMe{ 
 
    z-index:2; 
 
} 
 

 
.parallax { 
 
    background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg"); 
 
    height: 100%; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.topnav { 
 
\t position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: #333; 
 
    overflow: hidden; 
 

 
    z-index:2; 
 

 
} 
 

 
/* Style the links inside the navigation bar */ 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
}
<html> 
 

 
</html><body> 
 
\t 
 
\t <div class="topnav" id="myTopnav"> 
 
\t \t <a href="#home">Home</a> 
 
\t \t <a href="#news">News</a> 
 
\t \t <a href="#contact">Contact</a> 
 
\t \t <a href="#about">About</a> 
 
\t </div> 
 
\t 
 
\t <div class="parallax"> 
 
\t \t <div class="caption"> 
 
    <span class="border">test</span> 
 
    </div> 
 

 
\t </div> 
 
\t 
 
\t <div class="aboutMe">test</div> 
 
\t 
 
\t <pre> 
 
\t 1 
 
\t 2 
 
\t 3 
 
\t 4 
 
\t 5 
 
\t 6 
 
\t 7 
 
\t 8 
 
\t 9 
 
\t 10 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t </pre> 
 
\t </body> 
 

 
</html>

1

嘗試添加 「z-index的」 CSS道具的絕對定位的元素。

+0

爲了更精確的附加'的z index'到'.topnav'元件 –

-1

查看更新:

html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t } 
 

 
.caption { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #000; 
 
    
 
} 
 

 
.caption span.border { 
 
    color: #fff; 
 
    padding: 18px; 
 
    font-size: 3em; 
 
    letter-spacing: 10px; 
 
    
 
} 
 

 
.aboutMe{ 
 
    z-index:2; 
 
} 
 

 
.parallax { 
 
    background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg"); 
 
    height: 100%; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.topnav { 
 
\t position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background-color: #333; 
 
    overflow: hidden; 
 

 
    z-index:99; 
 

 
} 
 

 
/* Style the links inside the navigation bar */ 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
}
<html> 
 

 
</html><body> 
 
\t 
 
\t <div class="topnav" id="myTopnav"> 
 
\t \t <a href="#home">Home</a> 
 
\t \t <a href="#news">News</a> 
 
\t \t <a href="#contact">Contact</a> 
 
\t \t <a href="#about">About</a> 
 
\t </div> 
 
\t 
 
\t <div class="parallax"> 
 
\t \t <div class="caption"> 
 
    <span class="border">test</span> 
 
    </div> 
 

 
\t </div> 
 
\t 
 
\t <div class="aboutMe">test</div> 
 
\t 
 
\t <pre> 
 
\t 1 
 
\t 2 
 
\t 3 
 
\t 4 
 
\t 5 
 
\t 6 
 
\t 7 
 
\t 8 
 
\t 9 
 
\t 10 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t . 
 
\t </pre> 
 
\t </body> 
 

 
</html>

0

.topnav較高的z-index。

相關問題