css3下阴影下另一个div，z索引不工作 [英] css3 drop shadow under another div, z-index not working

问题描述

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

i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it's not working (the shadow is still being covered). when i put a break between the divs, i can see the shadow and therefore i know that part of the code is working properly. i have the following html code:

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

任何想法？感谢。

推荐答案

z-index 属性只能在相对，绝对或固定元素。

The z-index property works only on relative, absolute or fixed positioned elements.

$ c> #middle a position：relative 。

Try to give your div #middle a position: relative.

这篇关于css3下阴影下另一个div，z索引不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！