shadow - 如何为css中z-index较低的盒子提供盒子阴影

Question

嗨，我对 CSS-box 阴影有点陌生，

我用 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边距。

小提琴。