文本显示在 span 后面

Question

也许有更好的方法可以做到这一点，但我要做的是，当您将鼠标悬停在链接上时，背景颜色会从左侧滑入。但我遇到的问题是css。我有一个链接，在链接中有一个跨度（包含背景颜色）。然后是这样的文字：

<a href="/info/about"><span></span>About</a>

发生了什么，文本显示在跨度后面。我曾尝试将文本移动到跨度前面，但这也不起作用。我该怎么做才能解决这个问题？

我也有每个集合的z-index，但它仍然不起作用。

这里是小提琴：http://jsfiddle.net/h5rnj/

Answer 1

更改span的z-index

作为

.nav-links a span {
z-index: -1
}

JSFiddle

检查这个Why does z-index: -1; appear above z-index: 1;?

Answer 2

如果您只是将.nav-links a span 的z-index 从1 减少到-1，它就可以工作。

.nav-links a span{
    z-index: -1;
}

jsFiddle

之所以有效是因为z-index 堆栈——每次使用z-index 都会建立一个独立的“堆栈上下文”。 .nav-links a 有一个z-index: 2，所以它里面的所有东西，包括你的span，都是相对的。旧的z-index 是1，它击败了链接文本的auto（相对而言为0）。现在，使用否定的z-index，span 低于同一元素中的链接文本。

请注意，该行为并不像z-index 总是添加那么简单。每个堆叠上下文都建立了一个新域，其中z-index 值仅相对于彼此有意义。例如，在this page 上，红色的div.sub-one 位于其父级和其父级上方的div 之上，即使其z-index 是-1000。

Answer 3

将.nav-links a span 更改为z-index: -1。另外，这是 CSS3 中的动画：http://jsfiddle.net/h5rnj/10/

CSS：

.nav-links a span{
    display: block;
    background-color: #808080;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: all 1s ease-in; 
}
.nav-links a:hover span{
    left: 0;
    transition: all 1s ease-in; 
}