1
4

1 に答える 1

0

コードの簡略版は次のとおりです。

<div class="wrap">
    <a href="http://www.google.com">Site Map</a>
    <div>
       TextBox and Button from .asp tags...
    </div>
</div>

<div id="menu">
    <ul>
        <li class="nav1"><a href="http://yahoo.com">Home</a></li>
        <li class="nav2"><a href="">Products</a></li>
        <li class="nav3"><a href="">Contact Us</a></li>
        <li class="nav4"><a href="">About Us</a></li>
    </ul>
</div>

簡単にするために、すべてのインライン スタイルを削除しました (スタイル シートを使用して、よりクリーンにします)。

CSS は次のとおりです。

.wrap {
    float:right; 
    height: 100px; 
    margin-left: 0px;
    margin-right:0px; 
    width: 352px;
    outline: 1px dotted blue;
    position: relative; /* need this for z-index to take effect */
    z-index: 2;
}

#menu {
    outline: 1px dotted blue;
    height: 265px;
    width: 1013px; /* Fix the typo for px (extra space) */
    position:fixed;
    z-index: 1;
    top: 0;
    left: 0;
}

ここにあるのは 2 つのブロック要素でdiv.wrap、div#menu1 つ目は静的位置のインフロー ブロックで、2 つ目は固定位置です。

デフォルトでは、要素は DOM に表示される順序でスタックされるため、 がスタックされdiv#menuますdiv.wrap。このため、十分な大きさのウィンドウがない限り、リンクが背後div#menuにあるため、リンクをクリックすることができません。div.wrap

これを修正するにはz-index、非静的配置要素に対してのみ機能する を使用します。この場合、 に適用position: relativeしてからdiv.wrap設定z-index: 2し、div#menuに設定z-index: 1すると、すべてのウィンドウ幅で [サイト マップ] リンクにマウスでアクセスできるようになります。

フィドル: http://jsfiddle.net/audetwebdesign/Dg8YN/

参照

z-index の詳細については、http://www.w3.org/TR/CSS2/visuren.html#layers
およびhttp://www.w3.org/TR/CSS2/zindex.htmlを参照してください。

于 2013-05-30T14:05:56.943 に答える