2017-08-25 3 views
1

Ich habe eine Navbar an der Spitze befestigt. Beim Scrollen geht fast alles unter die Navbar, aber da ist dieses Stück Text, das über die Navbar geht. Kann ich zwingen, dass die Navigationsleiste ganz oben steht, oder den Text zwingen, ganz unten zu sein?Wie man alles unter der Navbar macht

Hinweis: Um das Problem zu beobachten, fügen Sie bitte beliebige Inhalte hinzu, damit Sie durch die Seite blättern können.

Hier ist der Code: 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>

Antwort

0

Ich gab dem Körper einen Z-Index von 1 und Ihr #topnav Element einen Z-Index von 2, auf diese Weise wird es auf alles, was Sie auf Ihrer Website hinzufügen.

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

Versuchen Sie, einen "z-index" css prop auf das absolut positionierte Element hinzufügen.

+0

Um genauer zu sein add 'z-index' zu' .topnav' Element –

-1

Siehe Update:

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 Geben Sie einen höheren Z-Index.

Verwandte Themen