如何在指定date-tnumber区间的div上方添加覆盖式div？

我有一个包含<td>的表格，<td>内存在带有date-tnumber属性的<div>元素。我希望添加一个<div>，使其高度覆盖date-tnumber从700到800的所有<div>，并显示在这些<div>的上方。但使用以下代码时，新<div>会被插入到目标<div>的后方（中间位置），无法实现预期效果。

JavaScript代码 #

var htmlString = '<div class="stack-top ' + cssclass + '"><div class="mydivinside"><span class="stitle">' + title + '</span><br/><span>' + setime + '</span></div></div>',
div = document.createElement('div'),
div1 = document.querySelector("div[data-day='" + dateoffset + "'][date-tnumber='" + ehour + "']");
div.innerHTML = htmlString;
div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);

HTML结构 #

<td class="md" data-date="10/24/2022" data-day="0">
  <div data-day="0" date-tnumber="700" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="701" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="702" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="703" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="704" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="705" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="706" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="707" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="708" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="709" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="710" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="711" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="712" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="713" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="714" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="715" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="716" onclick="GetData(this);"></div>
  <div data-day="0" date-tnumber="717" onclick="GetData(this);"></div>
</td>

CSS样式 #

.stack-top{ z-index: 9999;  vertical-align:middle;  width: 80%; position: relative;}

问题根源 #

1. 插入位置错误：当前代码将新div插入到单个目标div的下一个位置，导致它处于目标元素之间，无法覆盖多个div。
2. 定位方式错误：position: relative会让元素占据文档流位置，无法悬浮覆盖在其他元素上方。

修复步骤 #

1. 调整插入位置：将新div直接插入到<td>的子元素最前方，确保它是<td>的直接子元素。
2. 使用绝对定位：修改CSS为绝对定位，给<td>设置相对定位作为参考，让新div可以基于<td>定位。
3. 计算覆盖范围：找到date-tnumber=700和date-tnumber=800的div，计算它们的位置和高度，设置新div的top和height属性。

修改后的完整代码 #

JavaScript代码

// 获取目标td元素
const targetTd = document.querySelector(`td[data-day="${dateoffset}"]`);
// 获取起始和结束的目标div
const startDiv = targetTd.querySelector(`div[date-tnumber="700"]`);
const endDiv = targetTd.querySelector(`div[date-tnumber="800"]`);

if (startDiv && endDiv) {
  // 计算覆盖区域的top值和总高度
  const topOffset = startDiv.offsetTop;
  const totalHeight = endDiv.offsetTop + endDiv.offsetHeight - topOffset;
  
  // 创建新的覆盖div
  const overlayDiv = document.createElement('div');
  overlayDiv.className = `stack-top ${cssclass}`;
  overlayDiv.innerHTML = `<div class="mydivinside"><span class="stitle">${title}</span><br/><span>${setime}</span></div>`;
  
  // 设置定位样式
  overlayDiv.style.top = `${topOffset}px`;
  overlayDiv.style.height = `${totalHeight}px`;
  
  // 插入到td的最前方，确保层级在所有子div上方
  targetTd.insertBefore(overlayDiv, targetTd.firstChild);
}

修改后的CSS

/* 给td设置相对定位，作为绝对定位元素的参考容器 */
.md {
  position: relative;
}

.stack-top {
  z-index: 9999;
  width: 80%;
  position: absolute;
  left: 0; /* 可根据需求调整左右位置 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 实现内容垂直居中 */
  box-sizing: border-box;
}

.mydivinside {
  text-align: center; /* 文本水平居中 */
}

修改后，新div会以绝对定位的方式悬浮在date-tnumber700到800的所有div上方，高度完全覆盖目标区域，且不会影响原有元素的布局和交互。

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