内容滚动修复下方的插入框阴影

Question

我发现这个解决方案Inset box-shadow beneath content工作得很好，但是当外部容器div必须滚动（溢出）时，具有box-shadow的内部div将与内容一起滚动。如何解决这个问题？

＆＃13;

＆＃13;

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

＆＃13;

<div>
    <div></div>
    a
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以考虑添加叠加层并使用ExchangeService指定哪个块位于顶部以将阴影置于内容之上或之下。

z-index

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    padding: 10px;
    position:absolute;
    top:0;
    left:0;
    width:95%;
    height:100%;
    overflow: scroll;
    background: none;
    z-index: 99;
}

#overlay{
  display: block;
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 200px black;
  z-index: 1;
}