0

私はこのHTMLコードを持っています:

<div id="logo">
    <div id="left-block">
        <h1>Title goes here</h1>
    </div>
</div>
<div id="right-block">
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
    </ul>
</div>

次の CSS コードを使用して、左上隅にタイトル、右上に項目メニューを表示します。

#logo {
    position: absolute;
    z-index: 1;
}

#left-block {
    background-color: red;
    height: 50px;
}

#right-block {
    float: right;
    background-color: blue;
    height: 50px;
    z-index: 5;
}

ul {
    float: right;
    list-style: none;
}

li {
    display: inline;
    margin: 0 5px 0 0px;
}

問題は、このFiddle exampleに示されているように長いタイトルがある場合です。タイトルがメニューに重なっており、z-index が機能していないようです (どこにでも z-index を配置しましたが成功しませんでした)。z-index が機能しないのはなぜですか? #logo が絶対位置だから？この問題を解決するにはどうすればよいですか?

注:#logo {position:absolute}この簡略化されたデモに表示されていない他の要素で必要になるため、これ ( ) を変更することはできません。

4

2 に答える 2

2

手動で#right-block位置を設定するだけです：

#right-block {
    position: relative;
    float: right;
    background-color: blue;
    height: 50px;
    z-index: 5;
}

z-indexは、absolute|relative|fixed配置された要素でのみ動作し、デフォルト値はpositionですstatic。

于 2013-02-12T12:40:59.960 に答える
0

私はあなたがいくつかのmax height/を持っていると思うwidthので、CSSを書いてください#logo

#logo {
    position: absolute;
    z-index: 1;
    width: 100px; /* your maximum in width */
    height: 100px; /* your maximum in height */
    overflow: hidden; /* just to make sure there is nothing leaking your DIV */
}
于 2013-02-12T12:40:38.933 に答える