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