JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://www.google.com" target="_blank">Clica aqui</a>

<div id="click">Ou clica aqui!</div>
<button type="button">Fazer toggle da classe</button>
<div id="estado"></div>
<div id="sobreposta"></div>

CSS

* {
    margin: 20px 0px;
}
.azul {
    color: blue;
    font-weight: 800;
}
#sobreposta {
    margin: 0px;
    position: absolute;
    float:left;
    top:0px;
    left:0px;
    height:120px;
    width: 120px;
    z-index:-100;
}
.zIndex {
    z-index:100 !important;
}

JavaScript

var bloqueado = false;
$$('a, #click').addEvent('click', colorir);

function colorir() {
    if (bloqueado) return false;

    //resto do codigo
    this.toggleClass('azul');

};

$$('button').addEvent('click', bloqueia);

function bloqueia() {
    bloqueado = !bloqueado;
    $('sobreposta').toggleClass('zIndex');
    bloqueado && $('estado').set('html', 'Bloqueado por uma div sobreposta (ver CSS)');
    !bloqueado && $('estado').set('html', 'Desbloqueado');
};