与阴影重叠'overflow: scroll'块

Question

我在左侧使用一个块来显示列表。另一个显示详细信息，它具有阴影。当左侧块具有"溢出：滚动"时，它开始在阴影上绘制元素的背景。

.div-left {
  float: left;
  width: 64px;
  max-height: 200px;
  overflow-y: scroll;
}
.div-right {
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.8);
  display: inline-block;
  width: calc(100% - 64px);
}

<div>
  <div class='div-left'>
    <div style="background-color: red;">1</div>
    <div style='background: white;'>2</div>
    <div>3</div>
    <div style="background-color: red;">4</div>
    <div>1</div>
    <div style='background: red;'>2</div>
    <div style='background: white;'>3</div>
    <div>4</div>
  </div>
  <div class='div-right'>Replaced CSS linter with Stylelint which<br>supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await<br>syntax! Replaced CSS linter<br>with Stylelint which supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await syntax!</div>
</div>

如何使列表上的阴影绘制？

Answer 1

看来overflow: scroll增加了元素的堆叠顺序。

您可以简单地将position: relative添加到右列，再次将其放在顶部，而z-index在这种情况下是可选的。

.div-left {
  float: left;
  width: 64px;
  max-height: 200px;
  overflow-y: scroll;
}
.div-right {
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.8);
  display: inline-block;
  width: calc(100% - 64px);
  position: relative; /* NEW */
}

<div>
  <div class='div-left'>
    <div style="background-color: red;">1</div>
    <div style='background: white;'>2</div>
    <div>3</div>
    <div style="background-color: red;">4</div>
    <div>1</div>
    <div style='background: red;'>2</div>
    <div style='background: white;'>3</div>
    <div>4</div>
  </div>
  <div class='div-right'>Replaced CSS linter with Stylelint which<br>supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await<br>syntax! Replaced CSS linter<br>with Stylelint which supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await syntax!</div>
</div>