Flexbox与z-index应用

//html
<nav class="navbar">
    <ul>
      <li><a href="/home">Home</a></li>
      <li class="active"><a href="/spaceships">Spaceships</a></li>
      <li><a href="/planets">Planets</a></li>
      <li><a href="/stars">Stars</a></li>
    </ul>
</nav>

//css
nav {
  display: block;
}

.navbar ul {
  font-family: 'Avenir Next', Avenir, Corbel, 'Franklin Gothic', sans-serif;
  list-style: none;
  padding: 0;
  background-color: #486a8e;
}

.navbar li {
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  /*width: 25%;*/
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  background-color: #12459e;
  outline: 1px solid #fff;
}

.navbar li a {
  display: block;
  text-decoration: none;
  line-height: 1.75em;
  padding: 1em;
  color: #fff;
}
.navbar ul{
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.navbar li.active{
    font-size: 1.25em;
}

右侧线置于底层

与常规块不同，不用将可伸缩项设置为非static的定位值，也可以直接给它们一个z-index属性。如果给了z-index属性，它的值会覆盖堆叠次序。带z-index属性可伸缩项也会创建一个新堆叠上下文。

//只需给.active的li元素上新增zindex值即可
.navbar li.active{
    z-index: 1;
}

加了zindex值后，改变层叠关系