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。

Answer 2

我认为您有一些最高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 */
}

为什么z-index不起作用？

2 个答案: