jquery - 文字顶部的转移效果

Question

我创建了一个这样的菜单

我所做的是，当您单击此菜单的某个项目时，事件项目的类将转移到新项目。

HTML

<ul class="navigation">
  <li class="home"><a href="#/home">home</a></li>
  <li class="about"><a href="#/about">about</a></li>
  <li class="work"><a href="#/work">work</a></li>           
  <li class="contact"><a href="#/contact">contact</a></li>      
</ul>

jQuery

active.removeClass('active');
  active.effect("transfer", { to: newBtn, className: "active" }, 300,function(){
    newBtn.addClass('active');
    active = newBtn;
});

CSS

.active{
  background-color: @ed;
  border-top:1px solid white;
  border-bottom:1px solid @9;
  .radius(13px);
  a{ color:#333;}
}

现在，它工作正常，类被转移到新的事件项目，但不在文本后面。传输时背景位于文本之上:

<强> JSFiddle

有人知道如何解决这个问题吗？

Answer 1

好的，正如我最初怀疑的那样，能够使用 z-index 解决这个问题。

首先，给 active 类低值:

z-index: 1;

然后列表项应该获得高值:

.navigation li {
    position: relative;
    z-index: 100;
}

Updated fiddle .