父元素的背景色无法覆盖子元素的背景色,怎么处理-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20712 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>