html - css 改变 z-index 不受影响

Question

这是结果:

查看链接如何覆盖数字

我尝试更改 before 元素的 z-index 并继续使其变大，但该行始终位于数字上方，

你能帮忙吗？ 该行的代码是

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: black;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: 0; /*put it behind the numbers*/
}

这是一个 jfiddle

http://jsfiddle.net/FkSH5/

Answer 1

那是因为你的 ::before 伪元素(顺便说一下，你应该对伪元素使用 :: 和 :对于伪类)被 ::after 伪元素覆盖。

解决方法是将::before伪元素设置为相对定位(如果不使用相对定位，z-index属性将是被忽略)的 z-index 高于 ::after 对应项，即:

#progressbar li::before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    position: relative;
    z-index: 2;
}

请在此处查看修改后的 fiddle :http://jsfiddle.net/teddyrised/FkSH5/1/