阻止'溢出：滚动'与阴影重叠

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>