Question

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

这是我的Fiddle

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以使用伪元素。我在#lightbox div上创建了一个并且宽度为90％（因此它不会干扰滚动条）

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

滚动时，盒子阴影不会停留在原位

1 个答案: