html - 滚动时盒子阴影不会停留在原地

Question

我有一个lightbox-div，需要position: fixed。灯箱内有一些内容，包括图像。现在重要的是 box-shadow 留在原地，当用户向下滚动时。此外，box-shadow 必须位于图像的前面。
尝试了一些 z-index 东西，但无法弄清楚如何让它正常工作。

这是我的 Fiddle

#lightbox {
    position: fixed;
    top: 20%;
    left: 20%;
}
div {
    width: 150px;
    height: 300px;
    border: 1px solid blue;
    overflow-y: auto;
    overflow-x:hidden;
    position: relative;
}

.shadow {
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    bottom: 100%;
    box-shadow: inset 0 10px 10px black, inset 0 -10px 10px black;
    z-index: 100;
}

<div id="lightbox">
    <div>content
        <img src="http://placehold.it/100x250"/>
        <img src="http://placehold.it/100x250"/>
        <img src="http://placehold.it/100x250"/>
        <div class="shadow"></div>
    </div>  
</div>

Answer 1

你可以为此使用一个伪元素。我在 #lightbox div 上创建了一个，宽度设置为 90%(因此它不会干扰滚动条)

#lightbox {
  position: fixed;
  top: 20%;
  left: 20%;
  overflow-y: hidden;
}
div {
  width: 150px;
  height: 300px;
  border: 1px solid blue;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
#lightbox:before{
  position: absolute;
  content:"";
  top: 0;
  left:0;
  height:100%;
  width:90%;
  box-shadow: inset 0 10px 10px black, inset 0 -10px 10px black;
z-index:8;
}

<div id="lightbox">
  <div>content
    <img src="http://placehold.it/100x250" />
    <img src="http://placehold.it/100x250" />
    <img src="http://placehold.it/100x250" />
    <div class="shadow"></div>
  </div>
</div>