3

構築中の Web サイトに問題があります。リスト項目への 2 つのリンク (「デフォルト」と「テスト」と呼ばれる) を含むメニューがありますが、Firefox ではそれらをクリックできません。IE では機能します。ページ上のアイテムの z-index 問題だと思いますが、解決できません。

<!DOCTYPE html>
<html>
<head>
<style>
.sezup li.current{
    color:#067d2c;
    position:relative;
    z-index:20;
}

.sezup a, a:hover{
    color:#067d2c;
    position:relative;
    z-index:20;
}
.header{
    position:relative;
    top:0px;
}
.sezup {
    margin: 0 auto;
    padding: 0 0 0 75px;
    width:800px;
position:relative;
    z-index:20;
}
#lineaup {
    background: url("../Images/sfondobarraup.png") repeat scroll 0 0 transparent;
    height: 16px;
    margin: 55px 0 0;
    position: relative;
    z-index: 0;
    top: -25px;
    left: 0px;
}
#lineaup li {
    bottom: 6px;
    float: left;
    margin: 0 10px;
    padding: 2px 15px;
    position: relative;
}
.loghi {
    margin: 0 auto;
    padding: 20px 0 0;
    position: relative;
    top: -45px;
    width: 1000px;
    height: 97px;
    border:1px black solid;
}
#logo {
    position: relative;
    top: -20px;
    float:left;
}
#calciatore {
    position: relative;
    float:right;
    top:-50px;
}
#erba {
    background: url("../Images/erba.png") repeat scroll 0 0 transparent;
    height: 65px;
    position: relative;
    top: -110px;
    z-index: 0;
    border:1px black solid;
}
</style>
</head>
    <body>



        <div class="header">
            <div id="lineaup">
                <div class="sezup">
                    <ul>

                        <li class="current"><a href="Default.aspx" id="hrefHome">Default</a></li>
                        <li><a href="test.aspx?id=1" id="hrefProfile">Test</a></li>
                    </ul>
                </div>
            </div>
            <div class="loghi">

                <img src="" title="logo" id="logo" /><img src="" title="logo" id="calciatore" />

            </div>

             <div id="erba">
             </div>
        </div>

    </body>

</html>
4

3 に答える 3

3

スタック コンテキストのため、親要素に z-index を設定すると、子要素により高い z-index を設定しても、それを「解除」することはできません。

通常、余分な z-index 値をすべて削除し、必要な場所にのみ追加することで、対処がはるかに簡単になります。

ここでデモを見る

于 2012-10-16T17:04:31.353 に答える
1

z-index以下を除くすべてを削除します。

#lineaup {
    z-index: 1;
}

と

#erba {
    z-index: -1;
}

z-index親要素ののみを変更する必要があります。子要素にhigherとhigherを割り当てる理由はありませんindices。

また、通常は 1 つの要素の背後にあるだけなので、これ-1と1ソリューションは機能するだけでなく、見栄えがよく、理解しやすいと思います。

記録として、負の z インデックスは許可されています。

于 2012-10-16T17:01:21.963 に答える
0

#lineap の z-index を増やします

#lineaup {
  z-index: 1;
  ...
}

http://jsfiddle.net/willemvb/wxWBm/

于 2012-10-16T17:04:21.877 に答える