Добавление наложения в CSS только без изменения существующего HTML и использования overgineered javaScript ⇐ Javascript

[Anonymous]

Моя цель - достичь чего -то вроде селектора элементов инструмента инспектора. Итак, я должен не изменить макет/стиль. Мне просто нужно добавить полупрозрачное наложение и границу. Я сделал это: < /p>

Код: Выделить всё

  .highlight-overlay {
position: relative;
}
.highlight-overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 166, 0, 0.2);
border: 2px solid blue;
pointer-events: none;
}
< /code>
выше работает отлично. Но большим недостатком является позиция: относительно; 

. Иногда он нарушает существующую макет HTML (если исходная позиция контейнера была исправлена ​​ или абсолютно или что -то еще).
Другое решение - использовать позицию фиксированной и используйте JavaScript для учета прокрутки. < /p>
function addOverlay(targetElement) {
const overlay = document.createElement('div');
const rect = targetElement.getBoundingClientRect();

overlay.style.position = 'absolute';
overlay.style.top = `${window.scrollY + rect.top}px`;
overlay.style.left = `${window.scrollX + rect.left}px`;
overlay.style.width = `${rect.width}px`;
overlay.style.height = `${rect.height}px`;
overlay.style.backgroundColor = 'rgba(255, 166, 0, 0.2)';
overlay.style.border = '2px solid blue';
overlay.style.pointerEvents = 'none';
overlay.style.zIndex = '9999';

document.body.appendChild(overlay);

// Update position on scroll
window.addEventListener('scroll', () => {
const rect = targetElement.getBoundingClientRect();
overlay.style.top = `${window.scrollY + rect.top}px`;
overlay.style.left = `${window.scrollX + rect.left}px`;
});
}
< /code>
Каким -то образом, я думаю, что это довольно чрезмерное решение для чего -то столь простого. "https://i.sstatic.net/bzarreku.png"/>

Подробнее здесь: https://stackoverflow.com/questions/794 ... verenginee