如何指定图层（特别是阴影）的订单？

我想让红色部分的阴影与白色部分重叠，而不是相反。如何指定图层（特别是阴影）的订单？

Screencap of issue

适用CSS：

#container { (the white part) 
    width: 960px; 
    margin: 0 auto 24px auto; 
    background: #FFFAFA; /*background: url(images/grid.png) center top no-repeat;*/ 
    box-shadow: 0px 5px 45px #343434; 
} 

#banner { (the red part) 
    background: -moz-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    height: 40px; 
    width: 100%; 
    box-shadow: 0px 10px 10px #343434; 
    border-bottom: 1px solid #612525; 
}

在情况下，它是很重要的，网幅广告的HTML中的主要内容之前。谢谢！

来源

2011-08-17 Benjin

我建议粘贴相关的HTML代码，而不是用英文来描述它，因为HTML有低估自身说话的能力;） – BoltClock

只需将position: relative添加到#banner应该这样做 - 将创建一个新的"stacking context"。

为安全起见：你可能还需要z-index: a number如果没有包含在你的问题的其他元素，你还要请阴影出现在顶部。

来源

2011-08-17 01:15:39 thirtydot

它如何接近设置图层顺序？ – Dani

'z-index'将不起作用，除非你从'static'的初始值改变'position'：你需要'position：relative'。如果没有别的东西使用'z-index'，你不需要设置一个明确的'z-index'来让东西出现在顶部。 – thirtydot

或者换句话说：静态定位元素不是图层。 – BoltClock

使用CSS属性z-index。更高的z-index意味着元素在前面。

在您的例子添加

#container { 
    z-index: 1; 
} 
#banner { 
    z-index: 2; 
}

，它会工作。

来源

2011-08-17 01:15:11 Dani

除了'position：static'外，他们需要一些东西来做任何事情。 – alex

如何指定图层（特别是阴影）的订单？

回答

相关问题