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>

带有“溢出：滚动”的块与阴影重叠

1 个答案: