Как сделать границу границы перекрытия span относительно позиционированного div?

Question

Я хочу создать вкладку навигации с помощью поверочного элемента в навигационном элемента следующим образом:

вкладка

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

Навигационная помещается непосредственно над DIV, содержащий основное содержание. Диву дается относительное положение, так что элементы (не показаны) внутри него могут быть расположены абсолютно по отношению к нему. Для простоты, ниже показано соответствующее CSS:

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

Демонстрация в jsFiddle показывает границу сНа перекрытия на верхней границе диапазона, когда бывший изменяются от статического положения в относительное положение. Я попытался отменить его, указав высокий индекс z, но безрезультатно. Может ли кто-нибудь показать мне решение, которое не связано с введением новых элементов или изменением свойств отображения текущих элементов?

Answer 1

Это вы что искали?

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

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

Поскольку он был выбран в качестве ответа, я думал, что я хотел бы добавить немного больше:

Если вы не изменить Z-индекс элемента, он будет основываться на порядке элемента на странице.

Отрицательный запас все равно сохранит элемент под тот, который следует за ним.

"Хорошо Давайте дадим пролете Z-индекс, то
-. Перейти на
- Это не работает!".

Nope!
Чтобы иметь возможность изменять z-индекс элемента, он должен иметь значение позиции, отличное от «статического».