<p>Dies ist <a href="http://www.webkrauts.de">Text der hinter einem anderen Element liegt. Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</p> <div class="keine-klicks">Ein Überlagerndes Element. Text kann nicht ausgewählt werden, es kann aber "hindurch" geklickt werden. Versuche den dahinter liegenden Text zu markieren und den Link anzuklicken.</div>
.keine-klicks { /*Entferne pointer-events um das JavaScript-Alert zu aktivieren */ pointer-events: none; display: block; width: 300px; height: 100px; background: #000; position: absolute; top: 0; left: 80px; padding: 20px; color: #fff; opacity: 0.7; } p { padding: 20px; background: #ddd; }