Html 滚动时，框阴影未停留在适当位置

我有一个灯箱-

div

，它需要是

位置：固定的

。在lightbox中有一些内容，包括图像。现在，当用户向下滚动时，

框阴影保持在原来的位置非常重要。另外，
框阴影必须位于图像的前面
尝试了一些
z-index
功能，但无法找到正确的工作方式

这是我的


#灯箱{
位置：固定；
最高：20%；
左：20%；
}
div{
宽度：150px；
高度：300px；
边框：1px纯蓝色；
溢出y：自动；
溢出x：隐藏；
位置：相对位置；
}
.影子{
位置：绝对位置；
排名：0；
左：-10px；
右：-10px；
底部：100%；
盒影：嵌入0 10px 10px黑色，嵌入0-10px 10px黑色；
z指数：100；
}

内容
您可以为此使用伪元素。我已经在
#lightbox
div上创建了一个，并给出了90%的宽度（因此不会干扰滚动条）


#灯箱{
位置：固定；
最高：20%；
左：20%；
溢出y：隐藏；
}
div{
宽度：150px；
高度：300px；
边框：1px纯蓝色；
溢出y：自动；
溢出x：隐藏；
位置：相对位置；
}
#灯箱：以前{
位置：绝对位置；
内容：“；
排名：0；
左：0；
身高：100%；
宽度：90%；
盒影：嵌入0 10px 10px黑色，嵌入0-10px 10px黑色；
z指数：8；
}

内容
很好，谢谢，但问题是如果我将光标放在我的内容div中，我将无法再滚动div。唯一的方法是拖动滚动条。（至少在我测试的FF中）。它能解决这个问题吗？