html - 为什么 z-index 不起作用？

Question

我有这个 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})，因为此简化演示中未显示的其他元素需要它。

Answer 1

只需手动设置 #right-block位置:

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

z-index 仅适用于 absolute|relative|fixed定位元素，默认值为 position是static .