如何给css中具有较低z-index的框提供框阴影

Question

嗨，我对CSS-box shadow有点新，

我用HTML编写了以下代码，

<div id="left_content"></div>
<div id="right_content"></div>

并在CSS中使用代码，

#left_content {
  width : 250px;
  height: 350px;
  background-color : #DDDDDD;
  position : fixed;
  z-index : 10;
  float: left;
}

#right_content{
  width : 700px;
  height: 350px;
  background-color : #FFFFFF;
  float : right;
  -webkit-box-shadow: -4px -2px 5px rgba(48, 50, 50, 0.9);
  -moz-box-shadow:    -4px -2px 5px rgba(48, 50, 50, 0.9);
  box-shadow:         -4px -2px 5px rgba(48, 50, 50, 0.9);
}

左侧内容是固定的，当我们滚动右侧内容滚动时，阴影未被应用。

我需要阴影落在左侧内容上，我不想增加正确内容的z-index。

任何帮助都会很明显。 提前谢谢。

Answer 1

右DIV的z-index必须高于左边的z-index。

#right_content{
    z-index:11;
}

这是jsfiddle

Answer 2

尝试将margin-left添加到您的右手div：

#right_content {
  margin-left: 270px;
}

这会考虑左div的宽度加上20px页边距。

Fiddle