如何用JS/jQuery动态创建div覆盖指定的两个div？

嘿，这个需求很好实现！要让新创建的div#event覆盖div#1和div#2，核心思路是用绝对定位精准控制它的位置和尺寸，同时保证它的层级比被覆盖的元素高。下面我分别给你原生JS和jQuery的两种实现方案，你可以根据项目情况选择：

这种方案不需要依赖任何库，直接用浏览器原生API就能搞定：

// 获取目标元素和它们的父容器
const div1 = document.getElementById('1');
const div2 = document.getElementById('2');
const parentContainer = div1.parentElement;

// 获取两个元素相对于视口的位置信息
const rect1 = div1.getBoundingClientRect();
const rect2 = div2.getBoundingClientRect();

// 计算覆盖区域的边界：取最左的起点、最上的起点，以及覆盖两个元素的总宽度和总高度
const coverLeft = Math.min(rect1.left, rect2.left) + window.scrollX;
const coverTop = Math.min(rect1.top, rect2.top) + window.scrollY;
const coverWidth = Math.max(rect1.right, rect2.right) - Math.min(rect1.left, rect2.left);
const coverHeight = Math.max(rect1.bottom, rect2.bottom) - Math.min(rect1.top, rect2.top);

// 创建新的div元素
const eventDiv = document.createElement('div');
eventDiv.id = 'event';
eventDiv.textContent = 'EVENT';

// 设置样式：绝对定位+高层级，确保能覆盖目标元素
eventDiv.style.position = 'absolute';
eventDiv.style.left = `${coverLeft}px`;
eventDiv.style.top = `${coverTop}px`;
eventDiv.style.width = `${coverWidth}px`;
eventDiv.style.height = `${coverHeight}px`;
eventDiv.style.zIndex = '999'; // 层级设高一点，避免被其他元素挡住
eventDiv.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // 可选：半透明背景方便调试
eventDiv.style.display = 'flex';
eventDiv.style.justifyContent = 'center';
eventDiv.style.alignItems = 'center';
eventDiv.style.color = '#fff';

// 将新元素添加到父容器中
parentContainer.appendChild(eventDiv);

小提示 #

• 如果div#1和div#2的父容器设置了position: relative，那覆盖元素的定位会相对于父容器，这时候不需要加window.scrollX/Y，而是要计算元素相对于父容器的偏移量（可以用parentContainer.getBoundingClientRect()来做减法）。
• z-index的值可以根据你的页面层级调整，只要比被覆盖元素的层级高就行。

如果你的项目已经引入了jQuery，用它可以简化代码，写法更简洁：

// 获取目标元素和父容器
const $div1 = $('#1');
const $div2 = $('#2');
const $parent = $div1.parent();

// 获取元素的视口位置信息
const rect1 = $div1[0].getBoundingClientRect();
const rect2 = $div2[0].getBoundingClientRect();

// 计算覆盖区域的位置和尺寸（考虑页面滚动偏移）
const coverLeft = Math.min(rect1.left, rect2.left) + $(window).scrollLeft();
const coverTop = Math.min(rect1.top, rect2.top) + $(window).scrollTop();
const coverWidth = Math.max(rect1.right, rect2.right) - Math.min(rect1.left, rect2.left);
const coverHeight = Math.max(rect1.bottom, rect2.bottom) - Math.min(rect1.top, rect2.top);

// 创建并配置新div，直接添加到父容器
$('<div id="event">EVENT</div>')
  .css({
    position: 'absolute',
    left: `${coverLeft}px`,
    top: `${coverTop}px`,
    width: `${coverWidth}px`,
    height: `${coverHeight}px`,
    zIndex: 999,
    backgroundColor: 'rgba(255, 0, 0, 0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: '#fff'
  })
  .appendTo($parent);

适配父容器相对定位的情况 #

如果父容器是position: relative，可以用jQuery的offset()方法计算相对偏移：

const parentOffset = $parent.offset();
const div1Offset = $div1.offset();
const div2Offset = $div2.offset();

const coverLeftRel = Math.min(div1Offset.left, div2Offset.left) - parentOffset.left;
const coverTopRel = Math.min(div1Offset.top, div2Offset.top) - parentOffset.top;

// 然后把css里的left和top换成coverLeftRel和coverTopRel即可

内容的提问来源于stack exchange，提问作者miami