Question

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

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;
}

DEMO ：http://jsfiddle.net/pleasedontbelong/kGmg5/

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

Answer 1

您需要删除li上的z-index：

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

Answer 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，它会创建不同的堆叠顺序

Answer 3

为元素指定z-index时，可以为其创建堆叠上下文。其子项上的所有其他z索引仅对该堆叠上下文生效。

在您的示例中，当您为li提供z-index时，您将为每个li创建不同的堆叠上下文。具有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。从它看来，无论如何都没有理由在那里。

z-index不处于绝对负位置

3 个答案: