How to Click Through an Overlay Div in CSS and JavaScript

By the end of this page, you will understand why a transparent div still blocks mouse interaction, how pointer-events works in CSS, and how to use it to let users click elements underneath an overlay. You will also see practical examples, common mistakes, and a small project you can build to practice the idea.

A transparent element can still receive mouse events. In web pages, visual transparency and mouse interaction are separate things.

Even if a div has:

background: transparent;

it still exists in the page layout and still sits on top of other elements if its position and stacking order place it there. That means it can intercept:

• clicks
• hover events
• drag events
• touch events

To let clicks pass through an element, the usual CSS solution is:

pointer-events: none;

This tells the browser not to treat that element as a target for pointer interaction. The browser then looks for the next eligible element underneath it.

This matters in real programming because overlays are common:

• selection boxes
• visual guides
• floating decorations
• custom highlights
• map overlays
• annotation layers

If these layers block interaction accidentally, the interface becomes frustrating. Knowing how to control pointer behavior helps you build better UI without breaking user interaction.

Think of the page as a stack of sheets.

• The bottom sheet has buttons and links.
• The top sheet is your overlay div.

Even if the top sheet is made of clear plastic, it still covers the buttons underneath. So when you press on it, your click hits the plastic first.

Using pointer-events: none is like making that plastic sheet intangible to the mouse. It is still visible, but your click passes through it to whatever is below.

The core CSS is:

overlay {
  pointer-events: none;
}

In a real example, you would usually target a class or id:

<button class="under-button">Click me</button>
<div class="overlay"></div>

.under-button {
  position: relative;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid red;
  background: transparent;
  pointer-events: none;
}

What this does

• The overlay is still visible.
• The red border still appears.
• But the overlay no longer captures clicks.
• Clicking on the area covered by the overlay activates the button underneath.

Basic before-and-after

Blocks clicks

.overlay {
  background: transparent;
  border: 2px solid red;
}

Allows click-through

.overlay {
  background: transparent;
  border: 2px solid red;
  pointer-events: none;
}

JavaScript example to toggle behavior

Sometimes you want the overlay to be clickable only in certain states.

<button id="toggle">Toggle overlay interaction</button>
<div id="overlay" class="overlay"></div>

.overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid blue;
  background: rgba(0, 0, 255, 0.05);
  pointer-events: none;
}

.overlay.active {
  pointer-events: auto;
}

const toggleButton = document.getElementById('toggle');
const overlay = document.getElementById('overlay');

toggleButton.addEventListener('click', () => {
  overlay.classList.toggle('active');
});

When the active class is present, the overlay starts receiving clicks again.

Consider this example:

<div class="container">
  <button id="saveButton">Save</button>
  <div class="overlay"></div>
</div>

.container {
  position: relative;
  width: 220px;
  height: 120px;
}

#saveButton {
  position: absolute;
  top: 40px;
  left: 60px;
}

.overlay {
  position: absolute;
  inset: 0;
  border: 2px solid red;
  background: transparent;
  pointer-events: none;
}

What happens step by step

1. The browser renders the container.
2. It places the Save button inside it.
3. It places the overlay on top because the overlay is also absolutely positioned and covers the full area.
4. Visually, the button is underneath the overlay.
5. When the user clicks where the button appears, the browser checks what element should receive the click.
6. Normally, the overlay would receive it first because it is on top.
7. But pointer-events: none tells the browser to ignore the overlay for pointer targeting.
8. The browser continues searching underneath.
9. The button is found.
10. The button receives the click event.

If pointer-events: none is removed

Then step 7 changes:

• the overlay becomes the click target
• the button underneath does not receive the click

That is why transparency alone does not solve the problem.

This technique is useful in many real interfaces:

Visual annotation layers

A design tool may draw outlines, boxes, or guides over content without blocking interaction with the actual content below.

Map overlays

A map application may show a visual region or highlight while still allowing the user to click map markers underneath.

Drag-and-drop hints

A page may show a temporary visual indicator during dragging, but the user should still be able to interact with drop targets below.

Tutorial highlights

A guided UI tour may add borders or spotlight effects around elements while preserving clicks to the real controls.

Decorative UI layers

Some effects are purely visual, such as glows, borders, and animated frames. These should often not interfere with buttons or links.

Canvas or SVG overlays

When using layered rendering, one visual layer may be present only for display, while actual interaction belongs to another layer.

In real projects, developers usually use pointer-events: none as part of broader UI patterns.

Non-interactive overlay pattern

A common pattern is to mark purely visual elements as non-interactive:

.selection-box,
.guide-layer,
.highlight-ring {
  pointer-events: none;
}

This avoids accidental event blocking.

Toggle interaction when needed

Sometimes an overlay is usually passive but becomes interactive in edit mode:

.overlay {
  pointer-events: none;
}

.overlay.is-editing {
  pointer-events: auto;
}

Guarding interactive children

If a parent has pointer-events: none, child elements also become effectively non-clickable unless you structure the UI differently. In real codebases, developers often separate:

• a visual overlay layer
• an interactive controls layer

This keeps event handling predictable.

Error prevention in component systems

In React, Vue, or similar frameworks, a reusable overlay component may include this style by default when the component is meant only for display.

Debugging layering issues

When clicks do not work, teams often inspect:

• position
• z-index
• stacking context
• pointer-events

These four are commonly involved in overlay bugs.

Mistake 1: Assuming background: transparent means click-through

This is the most common misunderstanding.

.overlay {
  background: transparent;
}

This makes the overlay invisible, not non-interactive.

Fix

.overlay {
  background: transparent;
  pointer-events: none;
}

Mistake 2: Applying pointer-events: none to something that should be clickable

Broken example:

button {
  pointer-events: none;
}

This disables interaction with the button itself.

Fix

Apply it only to the visual overlay, not to real controls.

Mistake 3: Forgetting that overlays may still affect layout or visibility

pointer-events: none only changes pointer interaction. It does not:

• remove the element
• change layout
• change stacking order
• hide it

Mistake 4: Expecting child elements to remain interactive

Broken example:

<div class="overlay">
  <button>Close</button>
</div>

.overlay {
  pointer-events: none;
}

If the overlay ignores pointer events, the button inside it will not behave as a normal clickable control in this setup.

Fix

Put interactive controls in a separate layer, or enable pointer events only where needed.

Mistake 5: Confusing stacking problems with pointer problems

Sometimes the issue is not pointer-events, but z-index.

If the clickable element is visually underneath because of stacking, inspect both:

.overlay {
  z-index: 10;
}

.button {
  z-index: 1;
}

If the overlay must stay on top visually, pointer-events: none is often the right solution.

Mistake 6: Not testing on real interactive elements

A plain div underneath may not show obvious click behavior. Test with:

• a button
• a link
• an input

That makes it easier to verify the fix.

pointer-events: none vs opacity: 0

• opacity: 0 makes the element invisible, but it can still block clicks.
• pointer-events: none keeps the element visible or invisible, but stops it from receiving pointer events.

pointer-events: none vs display: none

• display: none removes the element entirely.
• pointer-events: none keeps it visible but non-interactive.

pointer-events: none vs changing z-index

• Lowering z-index moves the element behind others.
• pointer-events: none keeps it visually on top while allowing interaction below.

If you want a visible overlay that does not block clicks, pointer-events: none is usually the best fit.

/* Make an overlay ignore clicks */
.overlay {
  pointer-events: none;
}

Key points

• Transparent does not mean click-through.
• Use pointer-events: none on non-interactive overlay elements.
• The browser will target elements underneath instead.
• The overlay remains visible.
• This is useful for borders, highlights, guides, and decorative layers.

Common pattern

.overlay {
  position: absolute;
  inset: 0;
  border: 2px solid red;
  pointer-events: none;
}

Toggle interaction

.overlay {
  pointer-events: none;
}

.overlay.active {
  pointer-events: auto;
}

Watch out for

• background: transparent does not allow click-through.
• opacity: 0 can still block clicks.
• Child elements inside a non-interactive overlay may not work as expected.
• Check position and z-index when debugging overlays.

Why does a transparent div still block clicks?

Because transparency only changes how the element looks. It does not stop the element from receiving pointer events.

How do I let clicks pass through a div in CSS?

Use:

pointer-events: none;

Does pointer-events: none hide the element?

No. The element stays visible. It just stops receiving mouse and touch interaction.

Can I make the overlay clickable again later?

Yes. Change it back to:

pointer-events: auto;

or remove the rule.

Does this work for links, buttons, and inputs underneath?

Yes, as long as those elements are actually underneath and otherwise clickable.

Is z-index enough to fix this problem?

Not always. z-index changes stacking order. If you need the overlay to stay visually on top but not block clicks, use pointer-events: none.

Can I use this for modal backdrops?

Usually no, because modal backdrops are often supposed to block interaction with the page behind them. This technique is better for visual overlays that should not interfere.

• CSS positioning — Overlays usually rely on position: absolute or position: fixed.
• z-index — Determines which layered element appears on top.
• Stacking context — Helps explain why some elements overlap in unexpected ways.
• Event bubbling — Useful when learning how browser events move through the DOM.
• Mouse events — Related to how clicks, hover, and pointer interaction work.
• Hit testing — The browser process of deciding which element receives a click.
• Visibility vs display — Important for understanding hiding elements compared with disabling interaction.
• UI overlays and modals — Related because they often depend on layered elements and controlled interaction.