How to detect / forbid elements to overlap over iframe

Question

I have script that launches my website's iframe on various 3rd party websites.

I need to detect elements that overlap over the iframe to avoid iframe's misusage - e.g. covering iframe partially with some buttons.

The only reliable approach I can think of is periodically running getBoundingClientRect() for every element of the page to ensure nothing overlaps. But that sounds like very heavy calculations which I would like to avoid.

I've added code snippet with scam button example - how could I detect / solve this issue efficiently and reliably?

const frame = document.createElement('iframe')
frame.src = 'https://www.w3.org/TR/css-transitions-1/'
document.querySelector('.frame-container').append(frame);

.frame-container {
  width: 100%;
  height: 500px;
}

iframe {
  width: 100%;
  height: 100%;
}

.scam-button {
  font-family: Arial;
  position: fixed;
  text-decoration: none;
  background: #2a5e9a;
  z-index: 33312312312;
  color: white;
  padding: 30px 10px;
  top: 40px;
  width: 250px;
  text-align: center;
  right: 20px;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.scam-button img {
  width: 40px;
}

<a href="#scam" class="scam-button">Join 1000000$ draw by <img src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" /></a>
<div class="frame-container"></div>