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不工作

回答

相關問題