如何使跨度的边框重叠相对定位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的边界重叠在跨度的边界上。我试图通过给出高z-index来反转它，但无济于事。任何人都可以向我展示一个解决方案，它不涉及引入新元素或更改当前元素的显示属性吗？

Answer 1

这是你要找的吗？

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

http://jsfiddle.net/3aexj/3/

因为它被选为答案，我想我会再添加一点：

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

负余量仍会使元素保持在随后的元素之下。

“好吧。让我们给出一个z-index，然后。” - 去吧！ - 它没用！“。

都能跟得上！
为了能够改变元素的z-index，它需要一个除“static”之外的位置值。