0

次のように、nav 要素内で span 要素を使用してナビゲーション タブを作成します。

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

このナビゲーション タブは、メイン コンテンツを含む div のすぐ上に配置されます。div には相対位置が与えられているため、div 内の要素 (表示されていません) は、div に対して絶対的に配置できます。簡単にするために、関連する CSS を以下に示します。

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

jsFiddleのデモでは、前者が静的位置から相対位置に変更されたときに、div の境界がスパンの境界の上に重なっていることが示されています。高い z-index を指定して元に戻そうとしましたが、役に立ちませんでした。新しい要素を導入したり、現在の要素の表示プロパティを変更したりしないソリューションを誰かに教えてもらえますか?

4

1 に答える 1

2

これはあなたが探しているものですか？

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

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

それが答えとして選ばれたので、もう少し追加したいと思いました：

要素の z-index を変更しない場合、ページ内の要素の順序に基づきます。

負のマージンは、要素を次の要素の下に保持します。

「よし、ではスパンに z-index を与えよう。
- がんばれ!
- うまくいかない!」.

いいえ！
要素の z-index を変更できるようにするには、「静的」以外の位置の値が必要です。

于 2013-03-28T15:38:47.177 に答える