How to click through a div to its underlying elements in CSS ?

Last Updated : 26 Apr, 2023

Assume you have an HTML div element and other elements. You want to click on these underlying elements via the div. This causes issues for most developers because they can only click underlying elements when they are outside of the overlay div. For instance, you have an anchor tag, but it is obscured by a div with absolute positioning. You cannot click the anchor tag below it because of the overlying div. For that overlaying div, we must set the CSS pointer-events property to “none” so that the pointer-events can be transferred to this underlying anchor tag. The CSS pointer-events: none property is used to disable mouse events, such as clicks and hover, on an HTML element.

Syntax:

pointer-events: none;

Example 1: In the below example, we have created a div element and applied some CSS properties to style the element. We have applied absolute position to it. The div element is positioned at the top left corner of the HTML page. We created a button element which is overlapped with the div element because of absolute positioning. An onclick event is applied to the button which will generate an alert message.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <style> 
        div { 
            width: 30%; 
            height: 15%; 
            position: absolute; 
            top:0; 
            left:0; 
            padding: 3rem; 
            border-radius: 0.5rem; 
            background:rgba(0, 128, 0, 0.296); 
              
        } 
        button { 
            width: 10vw; 
            height: 6vh; 
            color: #fff; 
            background-color: rgba(4, 4, 159, 0.662); 
            border: 0px; 
            border-radius: 0.5rem; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <h3>  
          How to click through a div to  
        its underlying elements?  
      </h3> 
    <div></div> 
    <button onclick="alertmsg()"> 
          Clickme. 
      </button> 
  
    <script> 
         alertmsg = () => { 
            alert("button clicked."); 
         } 
    </script> 
</body> 
  
</html>

Output:

The button element is not clickable.

Example 2: In this example, let now apply the pointer-events: none; property to the overlapping div in order to disable the pointer-events for this div element. When the pointer events will be disabled for this element the event will be activated for underlying elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <style> 
          
        div { 
            width: 30%; 
            height: 15%; 
            position: absolute; 
            top:0; 
            left:0; 
            padding: 3rem; 
            border-radius: 0.5rem; 
            background:rgba(0, 128, 0, 0.296); 
            pointer-events: none; 
        } 
        button { 
            width: 10vw; 
            height: 6vh; 
            color: #fff; 
            background-color: rgba(4, 4, 159, 0.662); 
            border: 0px; 
            border-radius: 0.5rem; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>  
          How to click through a div to its  
        underlying elements? 
      </h3> 
    <div></div> 
    <button onclick="alertmsg()">Clickme.</button> 
  
    <script> 
         alertmsg = () => { 
            alert("button clicked."); 
         } 
    </script> 
</body> 
  
</html>