css - 通过覆盖 div 显示的滚动背景

Question

这是我的代码:

<div style="position: relative">
  <div style="width: 300px; height: 100px; background-color: #d28d8d; position: relative; z-index: 1000" />
  <div style="width: 300px; height: 300px; position: absolute; border: 1px solid black; overflow-y:scroll">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
  </div>
</div>

https://jsfiddle.net/Deepview/t8chgkbx/1/

顶部的彩色 div 用作叠加层。我设置了 z-index，但它下面的 div 中的文本仍然显示。我不想让这段文字显示出来。不确定是什么问题。然而，我真正的问题是如何允许用户在覆盖层上滚动时滚动覆盖层下方的内容。

更新:Bas van Dijk 修复了这个问题。好像你不能在第二行使用/> 但必须使用 .这很奇怪。无论如何，我的真实代码没有这个问题，因为我确实使用了结束 div。但回到我真正的问题。我想让用户在标题上滚动，这只是将滚动事件向下传递到它下面的 div。

Answer 1

我已经为两个 div 切换了绝对值和相对值:https://jsfiddle.net/t8chgkbx/5/

<div style="position: relative">
<div style="width: 300px; height: 100px; background-color: #d28d8d; position: absolute; z-index: 1000"></div>
  <div style="width: 300px; height: 300px; position: relative; border: 1px solid black; overflow-y:scroll">

并添加了 put pointer-events:none 以覆盖，如评论中所述