html - 如果设置了相邻 div 的背景颜色，则 Div 不会在相邻 div 上放置阴影

Question

我有两个 div。一个挨着一个。

<div id="first"></div>
<div id="second"></div>

当第一个 div 的背景颜色未设置时，第二个 div 会像您通常期望的那样在第一个 div 上投下阴影。示例:http://jsfiddle.net/a46zueo9/1/

#first {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;    

#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;        
margin-left: 100px;
}

但是如果第一个 div 设置了一些背景颜色，那么第二个 div 将停止在其上转换阴影。

#first {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #4af;
float: left;    

#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;        
margin-left: 100px;

示例:http://jsfiddle.net/a46zueo9/

我想知道这是否是正常行为。如果是这样，为什么？如果不是，我该如何解决？

Answer 1

是的，在第一个示例中，div 就像一个没有任何背景支持的框架，这是一个正常的行为

但在第二个例子中它有底座所以它就像一张可以覆盖的床单

解决它

first{
    z-index: 1;
    position: relative;
}

second{ z-index: 2;
    position: relative; }