1

嗨，我正在制作一个带有箭头作为分隔符的进度条，如下所示：

HTML

<ul>
    <li>
        step 1
        <span class="arrow"></span>
    </li>
    <li>
        step 2
        <span class="arrow"></span>
    </li>
    <li>
        step 3
    </li>
</ul>

CSS

li{
    float: left;
    width: 25%;
    background-color: #4a4a4a;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    z-index: 100;
}
.arrow{
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid red;
    display: block;
    position: absolute;
    right: -30px;
    top: 0px;
    z-index: 200;
}

演示：http: //jsfiddle.net/pleasedontbelong/kGmg5/

但箭头总是在li元素后面。我错过了什么吗？是否可以在不更改 html 的情况下执行此操作？

4

3 回答 3

2

您需要删除 z-index li：

li
{
    float: left;
    width: 25%;
    background-color: #4a4a4a;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    z-index: 100;
}
于 2013-09-25T18:24:58.633 回答
2

@Huangism 是正确的，解决问题的更改是 li 上的 z-index。

http://jsfiddle.net/kGmg5/9/

li{
    float: left;
    width: 25%;
    background-color: #4a4a4a;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    /* z-index:200;  Removed */
}

从他的评论中：

右边的 -30 将箭头推到下一个 li 后面，并且 z-index 在 li 上，它创建了不同的堆叠顺序

于 2013-09-25T18:15:19.327 回答
2

当你给一个元素一个 z-index 时，你就为它创建了一个堆叠上下文。其子项上的所有其他 z-index 只会在该堆叠上下文中生效。

在您的示例中，当您为 li 提供 z-index 时，您将为它们中的每一个创建不同的堆叠上下文。具有 z-index 的箭头将只能能够超越属于同一父 li 的堆叠上下文的其他元素。

我希望我已经说清楚了。但即使我这样做了，请查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context。它有一些很好的例子。

在不更改 html 的情况下，您可以按照 Sunil Salunkhe 的建议删除 li 上的 z-index。从它的外观来看，无论如何它都没有理由存在。

于 2013-09-25T18:32:31.383 回答