JSFiddle - React, Tailwind, and code Playground

HTML

<div>
</div>
<h2>
Get all elements at coordinates of DIV
</h2>
<h3>
With z-index: -1;
</h3>
<p id="test1">Result:</p>
<h3>
Without z-index: -1;
</h3>
<p id="test2">Result:</p>
<h2>
How can the HTML tag be both below and above the DIV tag?
</h2>

CSS

html, body{
  position:relative;
}

div {
  padding:20px;
  border:1px solid black;
  background-color:rgba(255,0,0,0.5);
  z-index:-1;
  position:absolute;
  left:0;
  right:0;
}

JavaScript

var div = document.getElementsByTagName('div')[0];
var rect = div.getBoundingClientRect();
var elements = document.elementsFromPoint(Math.ceil(rect.left), Math.ceil(rect.top));
var p = document.getElementById('test1');
while (elements.length){
	var element = elements.shift();
  console.log(element.tagName);
	p.innerHTML += " " + element.tagName;
}

div.style.zIndex = '0';
var elements = document.elementsFromPoint(Math.ceil(rect.left), Math.ceil(rect.top));
var p = document.getElementById('test2');
while (elements.length){
	var element = elements.shift();
  console.log(element.tagName);
	p.innerHTML += " " + element.tagName;
}