为什么z-index不起作用？

我有这样的HTML代码：为什么z-index不起作用？

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

来源

2013-02-12 Ivan

'＃右块'没有被定位为绝对或相对。请参阅文档：http://www.w3.org/wiki/CSS/Properties/z-index。 – 2013-02-12 12:38:50

@FelixKling这实际上是正确的答案，如果你发布它，我会放弃它。 'z-index'只能在相对/固定或绝对位置的情况下工作。 – 2013-02-12 12:41:49

可能的重复[为什么z-index不起作用？]（http://stackoverflow.com/questions/9191803/why-does-z-index-not-work） – 2013-02-12 12:42:57

只需手动设置#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-12 12:40:59 zessx

我觉得你有一些最大高度/宽度，所以只写一些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-12 12:40:38 FibreFoX

为什么z-index不起作用？

回答

相关问题