Css 滚动背景显示覆盖div

这是我的密码：

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

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

---

更新：巴斯范迪克解决了这个问题。似乎第二行不能使用/>，但必须使用。真奇怪。无论如何，我真正的代码没有这个问题，因为我确实使用了结束div。但是回到了我真正的问题。我想允许用户在标题上滚动，只需将滚动事件向下传递到标题下的div。

我已切换了两个div的绝对和相对值：

---

并添加了put pointer事件：none to overlay，如注释中所述

您能像这样将文本div从外部div中取出吗 :-

一,

二,

三,

四,

五,

六,

七,

八,

九,

十,

十一,

十二,

十三,

十四,

---

不幸的是，我不能这样做。jsfiddle代码是我的真实代码的简化版本，它实际上隐藏了较低的文本，只是不知道为什么在我提供的示例中没有这样做。一旦我在fiddle中解决了覆盖问题，我想解决我真正的问题，那就是当它出现在覆盖上时，让滚动正常工作。你让它正常工作了。谢谢但现在我真正的问题是，当你在覆盖上滚动时，下面div中的滚动不起作用。我想让叠加上发生的滚动事件向下冒泡到叠加。找到解决方案。需要将指针事件：无放在覆盖上。好的！我已经更新了我的答案并了解了指针事件，但我不知道它的存在：我发布了一个没有指针事件的答案，请检查它是否有帮助

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