我有一個固定在頂部的導航欄。當滾動時,幾乎所有的東西都會在下的下導航欄,但是有一段文字在導航欄上方。 我可以強制導航欄位於最高位置,還是強制文字位於最底部?如何使導航條下的所有東西
注意:爲了觀察問題,請添加任意內容,以便您可以滾動頁面。
下面的代碼: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>
爲了更精確的附加'的z index'到'.topnav'元件 –