один элемент не полностью остается поверх другого

Question

Спереди назад я хочу #elem, .hexagon, .circle. Но проблема в том, что красный цвет круга все еще остается на шестиугольнике ... z-index тоже не работает.

z-index влияет на непрозрачность красного цвета, но цвет остается на шестиугольниках. Я хочу, чтобы он был полностью за шестиугольниками.

Я хочу, чтобы красный цвет круга оставался позади шестиугольников, и я мог бы видеть его в промежутках между шестиугольниками.

let height = 0;
let index = 0;
let temp = false;
let left;
let topp = -21;
while (document.body.clientHeight <= innerHeight + 200) {
  for (let inde = 0, left = -40; inde < 25 || temp === true; inde++) {
    document.body.innerHTML += `<img id="h${index}" class="hexagon" src="hexagon1.png" 
    alt="">`
    const hexagon = document.querySelector(`#h${index}`);
    hexagon.style.left = left + "px";
    hexagon.style.top = topp + "px";
    left += 80;
    index++;
    if (inde == 24) {
      temp = false;
      topp += 61;
      height += 80;
      document.body.style.height = height + "px";
    }
  }
  for (let inde = 0, left = 0; inde < 25 || temp === false; inde++) {
    document.body.innerHTML += `<img id="h${index}" class="hexagon" src="hexagon1.png" 
    alt="">`;
    const hexagon = document.querySelector(`#h${index}`);
    hexagon.style.left = left + "px";
    hexagon.style.top = topp + "px";
    left += 80;
    index++;
    if (inde == 24) {
      temp = true;
      topp += 61;
      height += 80;
      document.body.style.height = height + "px";
    }
  }
}

const elem = document.querySelector("#elem");
let x = 0;
let el = false;
document.body.addEventListener("mousemove", e => {
  if (el) {
    document.body.removeChild(el);
  }
  const circle = document.createElement("div");
  circle.className = "circle";
  circle.style.left = e.offsetX + "px";
  circle.style.top = e.offsetY + "px";
  circle.style.transform = "translate(-50%,-50%)";
  document.body.appendChild(circle);
  el = circle;
})

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background-color: black;
}

.hexagon {
  position: absolute;
  height: 80px;
  width: 80px;
  z-index: 2;
}

#elem {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 3;
}

.circle {
  height: 300px;
  width: 300px;
  position: absolute;
  background-color: rgb(255, 0, 0);
  border-radius: 50px;
  z-index: 1;
}

<div id="elem"></div>