css - 如何使相对定位的div的跨度重叠边框的边框？

Question

我想使用 nav 元素中的 span 元素创建一个导航选项卡，如下所示：

<nav><span>span</span></nav>
<div id=relative>div</div>

此导航选项卡直接放置在包含主要内容的 div 上方。div 被赋予一个相对位置，以便其中的元素（未显示）可以相对于它进行绝对定位。为简单起见，下面显示了相关的 css：

span {
    border: black solid 10px;
}
div {
    border: orange solid 10px;
}
#relative {
    position: relative;
}

jsFiddle中的一个演示展示了当前者从静态位置变为相对位置时，div的边框重叠在span的边框之上。我试图通过给定高 z-index 来扭转它，但无济于事。谁能告诉我一个不涉及引入新元素或更改当前元素的显示属性的解决方案？

score 2 · Accepted Answer

这是你要找的吗？

span {
    border: black solid 10px;
    z-index: 5;
    position: relative;
}

既然它被选为答案，我想我会再补充一点：

如果您不更改元素的 z-index，它将基于页面中元素的顺序。

负边距仍会将元素保持在后面的元素之下。

“好吧。让我们给跨度一个 z-index，然后。
- 去吧！
- 它不工作！”。

没有！
为了能够更改元素的 z-index，它需要具有“静态”以外的位置值。

1 回答 1