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.

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.

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

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

/* 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.

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.