Hinzufügen von Overlay in CSS nur ohne vorhandene HTML und Verwendung von übergreichtem JavaScript zu ändern ⇐ CSS

[Anonymous]

Mein Ziel ist es, so etwas wie den Inspector Tool Element Selector zu erreichen. Also sollte ich nicht das Layout/Stil ändern. Ich muss nur eine durchscheinende Überlagerung und einen durchscheinenden Rand hinzufügen. Ich habe das gemacht: < /p>

Code: Select all

  .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>
Die oben genannte funktioniert großartig. Aber der große Nachteil ist Position: Relativ; 

. Es brechen manchmal das vorhandene HTML -Layout (wenn die ursprüngliche Position des Containers festgelegt wurde oder absolute oder etwas anderes).
Eine andere Lösung besteht darin Code> und verwenden Sie JavaScript, um das Scrollen zu berücksichtigen. < /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>
Irgendwie denke ich, dass dies eine ziemlich übergiefe Lösung für etwas so Einfaches ist. "https://i.sstatic.net/bzarreku.png"/>
Gibt es eine Möglichkeit, Overlay in CSS nur zu hindern, ohne vorhanden zu modifizieren HTML und Verwendung von übergreichtem JavaScript?