How to make an element non-clickable

Short answer

pointer-events: none makes the element "transparent" to the mouse: clicks pass through it to what lies below:

<style>
  .box { position: relative; width: 220px; }
  .label { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / 0.6); pointer-events: none; }
</style>
 
<div class="box">
  <button onclick="this.textContent = 'Clicked!'">Click through the layer</button>
  <div class="label">A layer on top</div>
</div>

This is done with decorative layers, labels and icons over buttons and fields.

Blocking a whole area

The inert attribute disables a block entirely: it cannot be clicked, Tab cannot get inside, and a screen reader skips it:

<div inert style="opacity: 0.5;">
  <button>Not available</button>
  <a href="#">Neither is this link</a>
</div>
<button>Available</button>

It is handy for a part of a form that is not available yet, or for the page under an open dialog.

Buttons and fields

A single button or field has the disabled attribute — it also tells the browser and screen readers that the element is inactive.

Common mistake

A button or a link is "disabled" with pointer-events: none. The mouse cannot press it, but from the keyboard the element still gets focus and fires on Enter. For controls use disabled or inert, and keep pointer-events for decoration.