将Div从Div中拖放到HTML / CSS中的图像元素上

Question

我的导航栏和直接位于其下方的图像元素一直存在此问题。基本上，我希望条形图中的阴影发射到图像上。我试图在图像元素上使用position：relative，但是当我这样做时它会使图像消失......

当我将代码放入jsfiddle时，它可以按照我的要求运行，但在Chrome中它根本不显示图像。

我将图像链接包含在名为＆＃34; Banner＆＃34;的div元素中。你可以在这里看到整个shabang：http://jsfiddle.net/g09uagyr/

#Banner{
  margin: 0px;
  padding: 0px;
  display: block;  /*display as block element */
  /*box-shadow: 0px 5px 15px black;*/
  position: relative;
  z-index: -1;
}

我能得到的任何帮助都会很棒！

Answer 1

从评论开始：您的#Banner的{​​{1}}为-1，这意味着可能存在但不在您的小提琴中的其他元素（例如非透明容器或正文）可以叠加它会导致z-index消失。

要解决这个问题，请为#Banner提供更高的z-index元素，以及#Banner更高的#nav元素。例如100 z-index为#Banner，#nav为101。