Scrolling Hintergrund zeigt durch Overlay div

Question

Hier ist mein Code:

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

Die farbige div an den Top-Acts als Overlay. Ich setze den Z-Index, aber der Text in dem darunter liegenden div zeigt immer noch durch. Ich möchte nicht, dass dieser Text durchgeht. Nicht sicher, was das Problem ist. Mein wirkliches Problem ist jedoch, wie der Benutzer den Inhalt unterhalb des Overlays scrollen kann, wenn er auf dem Overlay scrollt.

UPDATE: Bas van Dijk behob das Problem. Scheint so, als könntest du /> in der zweiten Zeile nicht verwenden sondern muss verwenden. Das ist komisch. Wie auch immer, mein echter Code hat dieses Problem nicht, weil ich das schließende div benutze. Aber zurück zu meinem wirklichen Problem. Ich möchte dem Benutzer erlauben, in der Kopfzeile zu scrollen, die das Scroll-Ereignis einfach an das darunter liegende div weiterleitet.

Answer 1

Ich habe die absolute und relative zu den beiden divs geschaltet: 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"> 

Und hinzugefügt put pointer-events:none wie in den Kommentaren beschrieben Overlay

Answer 2

können Sie Ihren Text div wie diese aus äußeren div nehmen : -

<div style="position: relative"> 
 
    <div style="width: 300px; height: 100px; background-color: #d28d8d; position: absolute; z-index: 3000" /> 
 
</div> 
 
<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>