Notice the links are not highlighting under the ovelay
<div class="wrap">
    <div class="overlay overlay1"></div>
        <div class="overlay overlay2"></div>
<ul class="mylist">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
    <li><a href="#">Item 6</a>
    </li>
    <li><a href="#">Item 7</a>
    </li>
    <li><a href="#">Item 8</a>
    </li>
        <li><a href="#">Item 9</a>
    </li>
        <li><a href="#">Item 10</a>
    </li>
        <li><a href="#">Item 11</a>
    </li>
        <li><a href="#">Item 12</a>
    </li>
        <li><a href="#">Item 13</a>
    </li>
        <li><a href="#">Item 14</a>
    </li>
</ul>
    
</div>



If you add pointer-events: none to the overlay, the overlays will no longer get in the way, as if they do not exist.



<div class="wrap">
    <div class="overlay nonexistent overlay1"></div>
        <div class="overlay nonexistent overlay2"></div>
<ul class="mylist">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
    </li>
    <li><a href="#">Item 3</a>
    </li>
    <li><a href="#">Item 4</a>
    </li>
    <li><a href="#">Item 5</a>
    </li>
    <li><a href="#">Item 6</a>
    </li>
    <li><a href="#">Item 7</a>
    </li>
    <li><a href="#">Item 8</a>
    </li>
        <li><a href="#">Item 9</a>
    </li>
        <li><a href="#">Item 10</a>
    </li>
        <li><a href="#">Item 11</a>
    </li>
        <li><a href="#">Item 12</a>
    </li>
        <li><a href="#">Item 13</a>
    </li>
        <li><a href="#">Item 14</a>
    </li>
</ul>
    
</div>

This is useful for 

<ul>
    <li>modal windows.</li>
    <li>adding button-like elements on top of select boxes.</li>
    <li>clicking through stylistic overlays like in the example.</li>
</ul>