css3下另一个div下的阴影，z-index不工作

我想使用阴影使它看起来像一个div（标题）是另一个“上面”。我的问题是“中间”div覆盖了阴影。我试图使用z-index把头div放在中间div，但它不起作用（阴影仍在被覆盖）。当我在div之间休息时，我可以看到阴影，因此我知道部分代码正常工作。我有以下的html代码：css3下另一个div下的阴影，z-index不工作

<div id='portal_header_light'> 
<img src="Home.png" height="32px" \> 
<img src="Wrench.png" height="32px" \> 
</div> 
<div id='middle'></div>

这个CSS：

#portal_header_light { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; text-align:center; 
    -moz-border-radius: 3px 3px 3px 3px; 
    -webkit-border-radius: 3px 3px 3px 3px; 
    padding: 0px 3px 0px 3px; 
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff)); 

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:white; 
    z-index:-1; 
}

什么想法？谢谢。如果你的元素不position:absolute

来源

2010-07-15 vee

112

的z-index属性仅适用于相对，绝对或固定定位元素

来源

2010-07-15 19:10:17 gearsdigital

简单修复，谢谢！ – vee 2010-07-15 19:16:53

不客气:) – gearsdigital 2010-07-15 19:39:51

我想你忘了'固定'。 – 2014-02-17 04:19:46

z-index将无法正常工作。

试着给你的div #middle a position: relative。

来源

2010-07-15 19:03:01 Robusto

或'位置：如果你的元素没有被定位relative'作为gearsdigital提到 – ScottS 2010-07-15 19:11:58

（相对定位的工作原理也一样）的https：//显影剂.mozilla.org/en/Understanding_CSS_z-index – FelipeAls 2010-07-15 19:13:35

试着在你想出现在下面的元素上插入阴影框。

.element-that-is-to-be-under{ 
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd; 
    -moz-box-shadow: inset 0 8px 4px -4px #ddd; 
    box-shadow: inset 0 8px 4px -4px #ddd; 
}

这样做会减轻Z指数的洗牌，从长远来看，您会更加快乐。

来源

2012-04-26 22:09:42 wittmason

建立在这里的其他答案，我发现这项工作更好通过position: relative#portal_header_light而不是#middle。然后，我不必拥有z-index: -1，它（至少在Chrome中）弄乱了游标链接悬停效果并导致了一些其他奇怪的问题。

http://jsfiddle.net/thaddeusmt/m6bvZ/

这里是简化的代码：

<div id="portal_header_light">Header Content</div> 
<div id="middle">Test Content</div> 

#portal_header_light { 
    position: relative; 
    padding: 3px; 
    background: #eee; 
    -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); 
    z-index:5; 
} 

#middle{ 
    height:308px; 
    background-color:#fee; 
    padding: 3px; 
}

来源

2013-12-10 22:51:41 thaddeusmt

css3下另一个div下的阴影，z-index不工作

回答

相关问题