我想要实现类似浏览器检查器工具的元素选择器效果——完全不改动原有布局/样式，只给目标元素添加半透明覆盖层和边框。最开始我写了这样的CSS：

.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;
 }

这段代码效果不错，但最大的问题是position: relative;——如果目标容器原本的定位是fixed、absolute或者其他值，加上这个属性有时候会破坏现有的HTML布局。

我还想到另一个方案：用fixed定位配合JavaScript来处理滚动问题，代码如下：

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`;
  });
}

但总觉得这个方案有点过度设计了，明明需求很简单，没必要搞这么复杂的JS。

有没有办法完全只用CSS实现这个效果？不需要修改现有HTML，也不用写这么复杂的JavaScript？

备注：内容来源于stack exchange，提问作者TSR