Question

如果您加载此代码并滚动，您会注意到我的导航栏出于某种原因，位于图片的各个部分后面。由于我在HTML和CSS（约1周）的经验，我努力弄清楚为什么会出现这种情况已经证明是徒劳的。如果有人能指出我如何将导航栏放在这些图像（部分）上，那将非常有帮助。

此外，我想知道如果定位不是绝对的，是否可以将元素置于导航栏中心。但是，我的第一个问题比这个问题要优先得多。

谢谢，

约翰

＆＃13;

$(function() {
    $('a[href*=#]').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
    });
});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
    margin: 0;
    padding: 0;
}

.font {
    font-family: 'Josefin Sans', sans-serif;
}

html, body {
    height: 100%;
}
section {
    position: relative;
    width: 100%;
    height: 100%;
}
section::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 80%;
}
section h1.main {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 300 64px/1 'Josefin Sans', sans-serif;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}
section h5.main {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 300 16px/1 'Josefin Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
}

section h1.main2 {
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 300 64px/1 'Josefin Sans', sans-serif;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;

}

#section01 { 
    background: url(http://wallpapercave.com/wp/LekAYO3.jpg) center center / cover no-repeat ;
}

#section02 { 
    background: url(http://i.huffpost.com/gen/1760918/images/o-HIGH-SCHOOL-BUILDING-facebook.jpg) center center / cover no-repeat ;
}

.arrow a {
    position: absolute;
    bottom: 20px;
    left: 48%;
    /* z-index: 2; */
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    font : normal 400 20px/1 'Josefin Sans', sans-serif;
    font-weight: bold;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}

/*
.arrow a:hover {
    opacity: .5;
}
*/

#section01 a, #section02 a {
    padding-top: 60px;
}
#section01 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb01 2s infinite;
    animation: sdb01 2s infinite;
    box-sizing: border-box;
}

#section02 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb01 2s infinite;
    animation: sdb01 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb01 {
0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb01 {
0% {
    transform: rotate(-45deg) translate(0, 0);
}
20% {
    transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
    transform: rotate(-45deg) translate(0, 0);
}
}

/* NAV BAR */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed; 
    transform: translateX(-50%);
    left: 50%;
    top: 0;
    width: 100%
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    color: grey;
    transition: 0.2s;
    transition-timing-function: ease-in;
}

.active {
    color: grey;
}

/* Other styling */

header.mainpage {
    textalign: center;
    color: black;
    position: relative;
}

#h1mainpage{
    font-size: 2em;
    padding: 2em;
    color: black;
}

.maincontainer {
    background: white;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
}

.textalign {
    text-align: center;
}


/* Images organization */

#containermain {
    display: flex;
    justify-content: space-between;
}

#containermain div {
    width: 250px;
    height: auto;
    background: rgb(255,255,255,0);
}

#containermaintext div {
    width: 250px;
    height: auto;
    background: rgb(255,255,255,0);
}

#containermain div:first-child {
    border-left: 0;
}

#containermain div:last-child {
    border-right: 0;
}

＆＃13;

<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="font: 'Josefin Sans', sans-serif; margin: 0;">
<ul class="mainpage">
    <li><a class = "font active" href="#">Home</a></li>          
    <li><a class = "font" href="#section02">Classes</a></li>       
    <li><a class = "font" href="contactme.html">About Me</a></li>
    <li><a class = "font" href="stemproject.html">STEM Project</a></li>
    <li><a class = "font" href="soccer.html">Sports</a></li>        
</ul>
<section id="section01" class="arrow">
    <h1 class="main">Welcome</h1> <h5 class="main"> <br> <br> <br> <br> A Website </h5>
    <a href="#section02"><span></span>Scroll</a>
</section>
<section id="section02" class="arrow">
    <h1 class="main" style = "color: black">What school do I attend?</h1> <h5 class="main"> <br> <br> <br> <br> A Website </h5>
    <a href="#section02"><span></span>Scroll</a>
</section>
<section id="section03">
    <div class="maincontainer">
        <header class = "mainpage"> <h1 class="font" id = "h1mainpage"> Use the navigation bar or click the pictures to begin </h1> </header>
    </div>
</section>
</body>

＆＃13;

Answer 1

将css类mainpage css设置为z-index为3

例如：

.mainpage {
    z-index:3;
}

这将把整个ul导航栏放在“面前”。部分

有关z-index属性如何工作的详细信息，请参阅This

导航栏位于部分下方

1 个答案: