Не показывать элемент в верхней части основного содержимого

Question

Есть ли общий способ проверить, находится ли содержимое поверх другого элемента?Например:

На этой странице элемент .ads находится не поверх .content, поэтому это не проблема.Но на этой странице она мешает читателю, поэтому это не должно показаться.

Важно отметить, что я ищу общий способ сделать это, я неЯ не знаю, что является основным элементом или его размером, только элемент ads.

К сожалению, я не нашел способа сделать это, и на SO нет других вопросов по этому поводу., поэтому я не смог предоставить то, что попробовал, так как это кажется невозможным.

Заранее спасибо.

Answer 1

Не существует метода DOM, обеспечивающего эту функциональность.Вы можете написать функцию, которая проверяет, перекрываются ли два элемента.Если они есть, то проверьте свойства CSS обоих, чтобы сделать вывод, что одно поверх другого.Это может помочь вам начать:

function areOverlapping(elem1, elem2) {
  const rect1 = elem1.getBoundingClientRect();
  const rect2 = elem2.getBoundingClientRect();

  return !(rect2.left > rect1.right || 
           rect2.right < rect1.left || 
           rect2.top > rect1.bottom ||
           rect2.bottom < rect1.top);
}

const ads = document.querySelector('.ads');
const content = document.querySelector('.content');

if (areOverlapping(ads, content)) {
  const style1 = window.getComputedStyle(ads);
  const style2 = window.getComputedStyle(content);

  // Here you can check CSS position, z-index, display, etc.
  // to infer that one is on top of the other.
  //
  // e.g. if one is position:fixed and the other is static,
  // you know the fixed is on top of the static due to overlap.
}