Question

z-index似乎对我不起作用。我用谷歌搜索但似乎无法找到问题。

我希望.navigation css类具有比css类.mobilenav和.mobilenavclosed更低的z-index，以便这些类在另一个上面分层。

我怎样才能做到这一点？我试过改变元素的位置和改变z-索引，但似乎没有任何效果。

谢谢！

这是我的HTML

<div class="navWrapper" ng-controller="NavController">
<section class="navigation">
    <div class="nav-container">
        <button ng-click="openHamburger()" class="hamburger"><span   class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
        <nav>
            <ul class="nav-list" ng-repeat="navitem in navitems">
                <li>
                    <a href="#!">{{navitem.title}}</a>
                </li>


            </ul>
        </nav>
    </div>
</section>

<div ng-class="{'mobilenav': isOpen, 'mobilenavclose': isClosed}">
    <button ng-click="closeHamburger()" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <div class="menuwrapper">
        <button class="optionwrapper" ng-repeat="navitem in navitems">
            <div class="navicon"></div>
            <p>{{navitem.title}}<p>
        </button>
    </div>
</div>

这是我的css

@keyframes active {
from {
    border-bottom: 0px solid #5aaafa;
}
to {
    border-bottom: 5px solid #5aaafa;
}
}

body,
html {
height: 100%;
margin: 0 auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",    Helvetica, Arial, "Lucida Grande", sans-serif;
color: red;
}

.menuwrapper {
display: none;
}

button.btn.btn-default {
display: none;
}

.navWrapper {
height: 100vh;
width: 100vw;
}

.activeindicator {
width: 100%;
height: 10%;
background: #5aaafa;
}

.hamburger {
display: none;
    }

.close {
display: none !important;
}

  .navhidden {
display: none !important;
}

.navigation {
width: 100%;
height: 50px;
background: #333;
color: white;
position: relative;
z-index: 1;
}

.navigation a {
color: white;
text-decoration: none;
font-weight: 300;
}

   .navigation a:hover {
   color: #ffffff;
   text-decoration: none;
   border-bottom: 5px solid #5aaafa;
  }

.nav-container {
margin: 0 auto;
padding: 0px 0px;
height: 100%;
position: relative;
}

nav {
display: inline-block;
font-size: .9em;
text-transform: uppercase;
font-weight: 700;
height: 100%;
position: absolute;
left: 23vw;
right: 23vw;
}

nav ul {
list-style: none;
text-align: left;
margin: 0;
padding: 0px;
height: 100%;
display: inline-block;
}

nav ul li {
float: none;
height: 100%;
}

nav ul li a {
display: block;
color: #a9a9a9;
padding: 0 20px;
background: #333;
height: 100%;
padding-top: 17px;
}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
text-decoration: none;
color: #ffffff;
border-bottom: 5px solid #5aaafa;
animation: active;
animation-duration: 0.2s;
animation-timing-function: linear;
}

nav ul li > a:hover {
color: #ffffff;
}

nav ul li > a:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}


/* Mobile navigation */

.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 100%;
width: 70px;
}

@media only screen and (max-width: 1389px) {
nav {
    left: 20vw;
    right: 20vw;
}
}

@media only screen and (max-width: 1250px) {
nav {
    left: 17vw;
    right: 17vw;
}
}

@media only screen and (max-width: 1172px) {
nav {
    left: 15vw;
    right: 15vw;
}
}

@media only screen and (max-width: 1075px) {
nav {
    left: 12vw;
    right: 12vw;
   }
}

//*IPAD VIEW
@media only screen and (max-width: 1000px) {
@keyframes openHamburger {
    from {
        width: 0vw;
    }
    to {
        width: 40vw;
    }
}
@keyframes closeHamburger {
    from {
        width: 40vw;
    }
    to {
        width: 0vw;
    }
}
nav ul,
nav li,
nav a {
    display: none;
}
 .hamburger {
    display: inline;
    background: none;
    border: 0px;
    height: 100%;
    width: 8%;
    padding: 0px;
}
.mobilenav.mobilenavclose {
    height: 100vh;
    background: #5aaafa;
    width: 0vw;
    margin: 0px;
    animation: closeHamburger;
    animation-duration: 0.7s;
    position: relative;
    z-index: 10;
}

 .menuwrapper {
    height: 32vw;
    width: 33vw;
    display: block;
    position: inherit;
    padding: 0px;
    margin:0 auto; 
      top: 32vh; 
}
.mobilenav {
    height: 100vh;
    background: #5aaafa;
    width: 40vw;
    margin: 0px;
    animation: openHamburger;
    animation-duration: 0.7s;
    position: relative;
    z-index: 10;
}

.navicon {
    height: 7vw;
    width: 7vw;
    border: 2px solid white;
    border-radius: 17vw;
    margin: auto;
}
.optionwrapper {
    text-align: center;
    display: table-cell;
    background: none;
    border: none;
    height: 11vw;
    width: 11vw;
    p {
        color: white;
        margin: 0px;
        padding-top: 5%;
        text-transform: uppercase;
        font-size: 0.7em; 
    }
}
button.btn.btn-default {
    display: inline !important;
    background: none;
    border: 0px;
    top: 2%;
    right: 5%;
    position: absolute;
    color: white;
    font-size: 20px;
}
}

//*MOBILE VIEW
@media only screen and (max-width: 600px) {
@keyframes openHamburger {
    from {
        width: 0vw;
    }
    to {
        width: 90vw;
    }
}
@keyframes closeHamburger {
    from {
        width: 90vw;
    }
    to {
        width: 0vw;
    }
}
.mobilenav.mobilenavclose {
    height: 100vh;
    background: #5aaafa;
    width: 0vw;
    margin: 0px;
    animation: closeHamburger;
    animation-duration: 0.7s;
    position: relative;
}
.mobilenav {
    height: 100vh;
    background: #5aaafa;
    width: 90vw;
    margin: 0px;
    animation: openHamburger;
    animation-duration: 0.7s;
    position: relative;
   }

  .menuwrapper {
    height: 78vw;
    width: 72vw;
    display: block;
    position: inherit;
    padding: 0px;
    margin:0 auto; 
      top: 24vh; 
   }


    .optionwrapper {
    text-align: center;
    display: table-cell;
    background: none;
    border: none;
    height: 26vw;
    width: 24vw;
    p {
        color: white;
        margin: 0px;
        padding-top: 10%;
        text-transform: uppercase;
        font-size: 0.8em; 
    }
}

    .navicon {
    height: 17vw;
    width: 17vw;
    border: 2px solid white;
    border-radius: 17vw;
    margin: auto;
}
}

Answer 1

如果你想让它们分层，你的底层需要是相对的，但是.mobilenav和.mobilenavclosed应该是position：absolute; ？至少我是如何完成分层的。

sealed case class ProgressStatus(value: String)

object ProgressStatus {
  object IN_PROGRESS extends ProgressStatus("IN_PROGRESS")
  object ACCEPTED extends ProgressStatus("ACCEPTED")
  object REJECTED extends ProgressStatus("REJECTED")

  val values = Seq(IN_PROGRESS, ACCEPTED, REJECTED)
}

同样.navigation不应该需要z索引，因为它太低了？

Z-index /分层问题

1 个答案: