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

父元素的背景色无法覆盖子元素的背景色,怎么办?
我想要模拟一个阴影效果,可是红色的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;}