html - 具有 'overflow: scroll' 的 block 与阴影重叠

Question

我用左边的一个方 block 来显示列表。另一个显示详细信息，它有一个阴影。当左侧 block 有“溢出:滚动”时，它开始在阴影上绘制元素的背景。

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