父元素的背景色无法覆盖子元素的背景色,怎么处理 _HTML/CSS

父元素的背景色无法覆盖子元素的背景色,怎么办?
我想要模拟一个阴影效果,可是红色的fixed无法覆盖灰色的shadow,要怎么设置才得?
fixed必须用absolute,shadow放到fixed里是为了根据fixed的高宽自动变化

CSS code


#fixed {
    background-color:red;
    width:100px;
    height:100px;
    top:50px;
    right:20px;
    display:block;
    position:absolute;
    z-index:5;
}
    #fixed .shadow{
        position:absolute;
        top:2px;
        left:2px;
        display:block;
        width:101%;
        height:101%;
        background-color:#555;
        z-index:4;
    }

HTML code


<div id="fixed">
    <ul>
        <li>asfasfsd</li>
    </ul>
         <div class="shadow"></div>
</div>

------解决方案--------------------

CSS code


#fixed {
    width:100px;
    height:100px;
    top:50px;
    right:20px;
    position:absolute;
}
    #fixed .shadow{
        position:absolute;
        top:2px;
        left:2px;
        width:101%;
        height:101%;
        background-color:#555;
        z-index:-1;
    }
#fixed ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    top:50px;
    right:20px;
    width: 100%;
    height: 100%;
    background-color: red;
}