JSFiddle - React, Tailwind, and code Playground

by liyuanqiu

HTML

<div style="width: 500px; height: 500px; position: relative; border: 1px solid black;">
  <div id="d1" style="width: 400px; height: 400px; position: absolute; left: 50px; top: 50px; background: green; z-index: 100;"></div>
  <div id="d2" style="width: 300px; height: 300px; position: absolute; left: 100px; top: 100px; background: blue; z-index: 200;"></div>
</div>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

JavaScript

const d1 = document.getElementById('d1');
const d2 = document.getElementById('d2');

d1.addEventListener('click', () => alert('d1'));
d2.addEventListener('click', (e) => {
	alert('d2');
	const display = window.getComputedStyle(d2).display;
  d2.style.display = 'none';
  const ele = document.elementFromPoint(e.clientX, e.clientY);
  ele.click();
  d2.style.display = display;
});