Question

嗨！

我最近一直试图用z-index“分层”三个元素（一个a，p和hr元素），这些元素包含一个单独的包装内部，而我有另一个用于nav（称为＃）在这种情况下的菜单），这三个元素将隐藏在后面。 a元素和p元素工作得很好（它们都有固定的位置），但是hr元素似乎不起作用（注意：它也有固定的位置）！

Here's the actual site i'm working on!

<body>
    <div class="wrapper" id="bg">
        <div class="bg">

            <p draggable="false" id="name">&lt;Title&gt;</p>

                <div class="line">
                    <hr id="line"/>
                </div>

            <a draggable="false" href="#menu" id="title">Enter</a>


        </div>
        <!--End bg-->
</div>
<!--- End wrapper#bg -->

<div class="wrapper" id="main">
<!-- Start wrapper#main-->

    <nav id="menu">
        <ul>
            <li><a href="#">PHOTOS.</a></li>
            <li><a href="#">FILMS.</a></li>
            <li><a href="#">SITES.</a></li>
            <li><a href="#">CONTACT.</a></li>
            <li><a href="#">PHOTOS.</a></li>
            <li><a href="#">FILMS.</a></li>
            <li><a href="#">SITES.</a></li>
            <li><a href="#">CONTACT.</a></li>
            <li><a href="#">PHOTOS.</a></li>
            <li><a href="#">FILMS.</a></li>
            <li><a href="#">SITES.</a></li>
            <li><a href="#">CONTACT.</a></li>
      </ul>

    </nav>
    <!-- End menu-->     

</div>
<!-- End wrapper#main-->  

</body>

CSS

@charset "utf-8";
/* CSS Document */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@font-face {
    font-family: Bodoni;
    src:url(fonts/BodoniXT.ttf);

}

.wrapper#bg {
    background: #000;
    margin: 0 auto;
    width: 768px;
}

.wrapper#main {
    background: #FFF;
    margin: -16px auto;
    width: 768px;       
}

body {
    background-color: #000;
}

div.bg {
    animation: fadein 2s;
    width: 970px;
    height: 1000px;
    margin-bottom: -41px;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}   

div.bg img {
    z-index: 0;
    margin-top: -26.4px;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */


}

p#name {
    z-index: 1;
    position: fixed;
    font-family: Bodoni,"Times New Roman", Times, serif;
    margin-top: 300px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 72px;    
    width: 768px;
    line-height: 1.4em;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
     -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera */
         animation: fadein 2s;
}

.wrapper#bg .line {
    z-index: 0;
    position: fixed;

}

.wrapper#bg .line hr#line {
    margin-left: 184px;
    position: relative;
    height: 1px;
    background-color: #FFF;
    margin-top: 400px;
    width: 400px;
    -moz-animation: fadein 2s; /* Firefox */
     -ms-animation: fadein 2s; /* Internet Explorer */
      -o-animation: fadein 2s; /* Opera */
         animation: fadein 2s;

}

a#title {
    z-index: 1;
    position: fixed;
    font-family: Bodoni,"Times New Roman", Times, serif;
    margin-top: 400px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 72px;
    width: 768px;
    line-height: 1.4em;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

}

a#title:hover {
    font-style: italic;
    margin-left: 6px;

}

<!--Slut på bg-section-->

<!--Början på menu-section-->

nav#menu {
    position: relative;
    margin: 0 auto;
    width: 970px;
    padding-top: 20px;
    line-height: 1.4em;
    -webkit-box-shadow: 0px -10px 15px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    0px -10px 15px rgba(50, 50, 50, 0.3);
    box-shadow:         0px -10px 15px rgba(50, 50, 50, 0.3);
}

nav#menu li {
    position: relative;
    list-style-type: none;
    padding-bottom: 10px;
}

nav#menu a {
    position: relative;
    z-index: 10;
    font-family: Bodoni, "Times New Roman", Times, serif;
    color: #000;
    font-size: 72px;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    -webkit-transition: padding-left 0.25s; /*Safari and Chrome*/
}

nav#menu a:hover {
    padding-left: 40px;
}

注意：我是HTML和CSS的新手，英语不是我的主要语言。

提前致谢！

具有固定位置的各种元素的Z-Index

0 个答案: