使用 fullPage.js 定位导航栏
Nav Bar Positioning Using fullPage.js
我的应用使用 fullPage.js。为了让我的导航栏在滚动后工作，我不得不在我的 html:
部分添加这段代码
<style>
header{
position: fixed;
z-index:1;
}
</style>
没有它，当我向下滚动时，导航栏中的 buttons/links 无法点击。不幸的是，添加了这些代码后，我的导航栏的排列就完全不正常了。有什么我可以做的 "position fixed" 不会破坏我的安排吗？
<html>
<head>
<title>Columbia Ride Share</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="fullpage.js/jquery.fullPage.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
<style>
header{
position: fixed;
z-index:1;
}
</style>
</head>
<body>
<header>
<h1 class = "page-title">Columbia Ride Share</h1>
<nav>
<ul>
<li><a href="#top">home</a></li>
<li><button class="btn btn-link" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button></a></li>
<div id="id02" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class = "loginMsg">
<p>Where are you headed?<p>
<a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
<a href="create-a-ride-from-airport.html">I need a ride to campus</a>
</div>
</form>
</div>
<li class = "login">
<button onclick = "document.getElementById('id01').style.display='block'"style="width:auto;">LOGIN</button>
</li>
<div id="id01" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="loginMsg">
<p>hi there!</p>
<p>log in to post and comment on columbia ride share</p>
</div>
<button class="loginBtn loginBtn--facebook">connect with facebook</button>
<button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google </button>
</form>
</div>
</ul>
</nav>
</header>
<div id ="fullpage">
<div class="section" id="section0">
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<p> <a href = "toJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "Newark">
<h6>NEWARK</h6>
<p> <a href = "ridesToJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "bottomRow">
<h6>LAGUARDIA</h6>
<p> <a href = "ridesToJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "createRide">
<button class = "button" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button>
</div>
<div id="id02" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class = "loginMsg">
<p>Where are you headed?<p>
<a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
<a href="create-a-ride-from-airport.html">I need a ride to campus</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class = "welcome">
<div class = "intro">
<p>Lorem ipsum elementum libero curae nam in id maecenas per, inceptos dui a aliquam velit eu ullamcorper ultricies platea, nibh adipiscing pulvinar nunc justo taciti non magna interdum lectus ligula cursus ornare aenean lacus tincidunt, semper gravida bibendum vitae laoreet morbi pharetra, nunc tellus donec imperdiet cubilia consectetur.Suscipit fermentum euismod etiam facilisis metus quam litora blandit himenaeos, convallis placerat felis mollis aliquam ante fringilla morbi tincidunt, at curabitur ligula sapien iaculis risus nullam platea morbi cursus adipiscing aliquet tempor commodo quis leo metus sem dictum.</p>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M",
authDomain: "columbia-ride-share.firebaseapp.com",
databaseURL: "https://columbia-ride-share.firebaseio.com",
storageBucket: "columbia-ride-share.appspot.com",
messagingSenderId: "1058399238109"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();
</script>
<script src = "app.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
</script>
<script>
var modal = document.getElementById('id02');
window.onclick= function(event){
if(event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
window.onload = function() {
initApp();
};
</script>
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
</body>
</html>
我的css代码是：
a{
color: #c4d8e2;
}
body {
height: 100%;
margin: 0;
width: 100%;
color: #c4d8e2;
font-family: "Helvetica Neue Light", Helvetica Neue, serif;
}
.page-title {
position: relative;
padding-top: -5%;
font-size: 36px;
font-weight: lighter;
margin-left:5%;
line-height:35%;
}
.container {
max-width: 70%;
margin-top: 2%;
}
.Newark {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
margin-top: -14%;
background-image: url(chelsea.jpg);
background-size: 301px 301px;
line-height: 200px;
text-align: center;
font-variant: small-caps;
}
.Newark h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.Newark p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.Newark p a{
color: #c4d8e2;
top: -30px;
}
.Newark:hover p {
display: block;
/*opacity: 0.6;*/
}
.Newark:hover{
opacity: 0.6;
display: block;
}
.JFK {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
margin-top: -14%;
background-image: url(brooklyn.jpg);
background-size: 301px 301px;
line-height: 200px;
text-align: center;
font-variant: small-caps;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.JFK p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover p {
display: block;
/*opacity: 0.6;*/
}
.JFK:hover{
opacity: 0.6;
display: block;
}
.bottomRow {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
background-image: url(nyu2.jpg);
background-size: 301px 401px;
line-height: 200px;
text-align: center;
border-bottom: 1px white;
border-top: 1px white;
font-variant: small-caps;
}
.bottomRow button{
position: relative;
background-color: transparent;
border: none;
padding: 110px 89px;
cursor:pointer;
text-align:center;
color: #c4d8e2;
font-size:33px;
font-variant: small-caps;
font-weight:700;
}
.bottomRow h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.bottomRow p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.bottomRow p a{
color: #c4d8e2;
top: -30px;
}
.bottomRow:hover p {
display: block;
/*opacity: 0.6;*/
}
.bottomRow:hover{
opacity: 0.6;
display: block;
}
.createRide {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
background-image: url(train.jpg);
background-size: 401px 301px;
background-position: 300px 300px
line-height: 200px;
text-align: center;
border-bottom: 1px white;
border-top: 1px white;
font-variant: small-caps;
}
.createRide button{
position: relative;
background-color: transparent;
border: none;
padding: 110px 89px;
cursor:pointer;
text-align:center;
color: #c4d8e2;
font-size:33px;
font-variant: small-caps;
font-weight:700;
}
.createRide h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.createRide p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.createRide p a{
color: #c4d8e2;
top: -30px;
}
.createRide:hover p {
display: block;
/*opacity: 0.6;*/
}
.createRide:hover{
opacity: 0.6;
display: block;
}
/*Navigation Bar*/
nav ul {
display: inline;
}
nav li{
margin: 0;
padding: 0 10px;
display: inline;
position: relative;
left: 63.5%;
top: -45px;
font-variant: small-caps;
font-weight: 500;
}
nav li a{
text-decoration:none;
}
.loginMsg{
display: relative;
margin-top: 25%;
font-size: 22px;
color: black;
}
.loginMsg p{
text-align: center;
}
.loginMsg a{
display:block;
margin-top:13px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto; /* 15% from the top and centered */
border: 12px solid #888;
border-color: #c4d8e2;
width: 30%; /* Could be more or less, depending on screen size */
height: 60%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Shared */
.loginBtn {
padding: 2em;
box-sizing: border-box;
position: relative;
width: 13em; - apply for fixed size
margin: 0.2em;
padding: 0 15px 0 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
font-variant: small-caps;
top: 10%;
left: 20%;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
/* Facebook */
.loginBtn--facebook {
display: block;
background-color: #4C69BA;
margin-bottom: 5px;
background-image: linear-gradient(#4C69BA, #3B55A0);
font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}
/* Google */
.loginBtn--google {
font-family: "Roboto", Roboto, arial, sans-serif;
background: #DD4B39;
display: block;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.instructions{
position: relative;
margin-left:10%;
margin-top: 50%;
font-size: 36px;
}
button {
background: none;
padding: 0;
border: none;
font-family: "Helvetica Neue Light", Helvetica Neue, serif;
font-variant: small-caps;
font-weight: 500;
color: #c4d8e2;
}
button:hover{
cursor: pointer;
}
.welcome{
background-color: #c4d8e2;
height: 100%;
width:100%;
margin-top:-3%;
max-width: 100%;
float:left;
clear: left;
}
.intro{
margin-left:10%;
display: block;
}
.intro p{
color:white;
font-size: 32px;
}
我可以通过将 header 的 z-index 设置为 1 来访问导航栏。z-index 指定元素的堆栈，因此将其设置为 1 ，我才能够把它"in front"的"section1"div。但是我还必须设置 header 的位置，如果我选择绝对，那么它会完全破坏我在 css 文件中给它的所有相对值。通过将其设置为相对，我能够保留我在 css 文件中想要的安排。
<style>
header{
position: relative;
z-index:1;
}
</style>
我的应用使用 fullPage.js。为了让我的导航栏在滚动后工作，我不得不在我的 html:
部分添加这段代码<style>
header{
position: fixed;
z-index:1;
}
</style>
没有它，当我向下滚动时，导航栏中的 buttons/links 无法点击。不幸的是，添加了这些代码后，我的导航栏的排列就完全不正常了。有什么我可以做的 "position fixed" 不会破坏我的安排吗？
<html>
<head>
<title>Columbia Ride Share</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="fullpage.js/jquery.fullPage.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
<style>
header{
position: fixed;
z-index:1;
}
</style>
</head>
<body>
<header>
<h1 class = "page-title">Columbia Ride Share</h1>
<nav>
<ul>
<li><a href="#top">home</a></li>
<li><button class="btn btn-link" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button></a></li>
<div id="id02" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class = "loginMsg">
<p>Where are you headed?<p>
<a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
<a href="create-a-ride-from-airport.html">I need a ride to campus</a>
</div>
</form>
</div>
<li class = "login">
<button onclick = "document.getElementById('id01').style.display='block'"style="width:auto;">LOGIN</button>
</li>
<div id="id01" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="loginMsg">
<p>hi there!</p>
<p>log in to post and comment on columbia ride share</p>
</div>
<button class="loginBtn loginBtn--facebook">connect with facebook</button>
<button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google </button>
</form>
</div>
</ul>
</nav>
</header>
<div id ="fullpage">
<div class="section" id="section0">
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<p> <a href = "toJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "Newark">
<h6>NEWARK</h6>
<p> <a href = "ridesToJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "bottomRow">
<h6>LAGUARDIA</h6>
<p> <a href = "ridesToJFK.html">to</a>
<a href = "#">from</a></p>
</div>
<div class = "createRide">
<button class = "button" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button>
</div>
<div id="id02" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class = "loginMsg">
<p>Where are you headed?<p>
<a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
<a href="create-a-ride-from-airport.html">I need a ride to campus</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="section" id="section1">
<div class = "welcome">
<div class = "intro">
<p>Lorem ipsum elementum libero curae nam in id maecenas per, inceptos dui a aliquam velit eu ullamcorper ultricies platea, nibh adipiscing pulvinar nunc justo taciti non magna interdum lectus ligula cursus ornare aenean lacus tincidunt, semper gravida bibendum vitae laoreet morbi pharetra, nunc tellus donec imperdiet cubilia consectetur.Suscipit fermentum euismod etiam facilisis metus quam litora blandit himenaeos, convallis placerat felis mollis aliquam ante fringilla morbi tincidunt, at curabitur ligula sapien iaculis risus nullam platea morbi cursus adipiscing aliquet tempor commodo quis leo metus sem dictum.</p>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M",
authDomain: "columbia-ride-share.firebaseapp.com",
databaseURL: "https://columbia-ride-share.firebaseio.com",
storageBucket: "columbia-ride-share.appspot.com",
messagingSenderId: "1058399238109"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();
</script>
<script src = "app.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
</script>
<script>
var modal = document.getElementById('id02');
window.onclick= function(event){
if(event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
window.onload = function() {
initApp();
};
</script>
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
</body>
</html>
我的css代码是：
a{
color: #c4d8e2;
}
body {
height: 100%;
margin: 0;
width: 100%;
color: #c4d8e2;
font-family: "Helvetica Neue Light", Helvetica Neue, serif;
}
.page-title {
position: relative;
padding-top: -5%;
font-size: 36px;
font-weight: lighter;
margin-left:5%;
line-height:35%;
}
.container {
max-width: 70%;
margin-top: 2%;
}
.Newark {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
margin-top: -14%;
background-image: url(chelsea.jpg);
background-size: 301px 301px;
line-height: 200px;
text-align: center;
font-variant: small-caps;
}
.Newark h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.Newark p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.Newark p a{
color: #c4d8e2;
top: -30px;
}
.Newark:hover p {
display: block;
/*opacity: 0.6;*/
}
.Newark:hover{
opacity: 0.6;
display: block;
}
.JFK {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
margin-top: -14%;
background-image: url(brooklyn.jpg);
background-size: 301px 301px;
line-height: 200px;
text-align: center;
font-variant: small-caps;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.JFK p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover p {
display: block;
/*opacity: 0.6;*/
}
.JFK:hover{
opacity: 0.6;
display: block;
}
.bottomRow {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
background-image: url(nyu2.jpg);
background-size: 301px 401px;
line-height: 200px;
text-align: center;
border-bottom: 1px white;
border-top: 1px white;
font-variant: small-caps;
}
.bottomRow button{
position: relative;
background-color: transparent;
border: none;
padding: 110px 89px;
cursor:pointer;
text-align:center;
color: #c4d8e2;
font-size:33px;
font-variant: small-caps;
font-weight:700;
}
.bottomRow h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.bottomRow p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.bottomRow p a{
color: #c4d8e2;
top: -30px;
}
.bottomRow:hover p {
display: block;
/*opacity: 0.6;*/
}
.bottomRow:hover{
opacity: 0.6;
display: block;
}
.createRide {
position:relative;
float: left;
left: 35%;
height: 301px;
width: 301px;
margin: 5px;
background-image: url(train.jpg);
background-size: 401px 301px;
background-position: 300px 300px
line-height: 200px;
text-align: center;
border-bottom: 1px white;
border-top: 1px white;
font-variant: small-caps;
}
.createRide button{
position: relative;
background-color: transparent;
border: none;
padding: 110px 89px;
cursor:pointer;
text-align:center;
color: #c4d8e2;
font-size:33px;
font-variant: small-caps;
font-weight:700;
}
.createRide h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.createRide p{
position: relative;
top: -170px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: none;
}
.createRide p a{
color: #c4d8e2;
top: -30px;
}
.createRide:hover p {
display: block;
/*opacity: 0.6;*/
}
.createRide:hover{
opacity: 0.6;
display: block;
}
/*Navigation Bar*/
nav ul {
display: inline;
}
nav li{
margin: 0;
padding: 0 10px;
display: inline;
position: relative;
left: 63.5%;
top: -45px;
font-variant: small-caps;
font-weight: 500;
}
nav li a{
text-decoration:none;
}
.loginMsg{
display: relative;
margin-top: 25%;
font-size: 22px;
color: black;
}
.loginMsg p{
text-align: center;
}
.loginMsg a{
display:block;
margin-top:13px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto; /* 15% from the top and centered */
border: 12px solid #888;
border-color: #c4d8e2;
width: 30%; /* Could be more or less, depending on screen size */
height: 60%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Shared */
.loginBtn {
padding: 2em;
box-sizing: border-box;
position: relative;
width: 13em; - apply for fixed size
margin: 0.2em;
padding: 0 15px 0 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
font-variant: small-caps;
top: 10%;
left: 20%;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
/* Facebook */
.loginBtn--facebook {
display: block;
background-color: #4C69BA;
margin-bottom: 5px;
background-image: linear-gradient(#4C69BA, #3B55A0);
font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}
/* Google */
.loginBtn--google {
font-family: "Roboto", Roboto, arial, sans-serif;
background: #DD4B39;
display: block;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.instructions{
position: relative;
margin-left:10%;
margin-top: 50%;
font-size: 36px;
}
button {
background: none;
padding: 0;
border: none;
font-family: "Helvetica Neue Light", Helvetica Neue, serif;
font-variant: small-caps;
font-weight: 500;
color: #c4d8e2;
}
button:hover{
cursor: pointer;
}
.welcome{
background-color: #c4d8e2;
height: 100%;
width:100%;
margin-top:-3%;
max-width: 100%;
float:left;
clear: left;
}
.intro{
margin-left:10%;
display: block;
}
.intro p{
color:white;
font-size: 32px;
}
我可以通过将 header 的 z-index 设置为 1 来访问导航栏。z-index 指定元素的堆栈，因此将其设置为 1 ，我才能够把它"in front"的"section1"div。但是我还必须设置 header 的位置，如果我选择绝对，那么它会完全破坏我在 css 文件中给它的所有相对值。通过将其设置为相对，我能够保留我在 css 文件中想要的安排。
<style>
header{
position: relative;
z-index:1;
}
</style>