为什么z-index不工作？ [英] Why z-index is not working?

问题描述

我有这个HTML程式码：

I have this HTML code:

<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显示左上角的标题和右上角的项目菜单代码：

It shows a title at the top-left corner and a item menu at the top right using this CSS code:

#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;
}

问题是当我有一个很长的标题， =http://jsfiddle.net/nNkKT/ =nofollow>小提示示例。标题重叠的菜单和z索引似乎是不工作（我把z-index无处不成功）。为什么z-index不工作？是因为#logo绝对定位？如何解决此问题？

The problem is when I have a long title as showed in this Fiddle example. The title overlaps the menu and z-index seems that is not working (I've put z-index everywhere without success). Why z-index is not working? Is because #logo is absolutely positioned? How to resolve this problem?

注意：我无法更改此设置（ #logo {position：absolute}

NOTE: I can't change this (#logo {position:absolute}) because other elements not showed in this simplified demo needs it.

推荐答案

只需手动设置

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

z-index只有固定定位的元素，默认值为 position 为 static 。

z-index only woks on absolute|relative|fixed positioned elements, and the default value is for position is static.

这篇关于为什么z-index不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！