如何通过JS插入提示消息且不挤压页面其他元素？

你遇到的问题根源是空div默认高度为0，插入文本后div高度被内容撑开，导致下方元素被挤压。这里给你几个实用的解决思路：

方案1：用绝对定位让提示脱离文档流 #

给提示div设置绝对定位，让它脱离正常的文档流，这样不管它有没有内容，都不会影响其他元素的布局。

先给.msg添加CSS：

.msg {
  position: absolute;
  /* 让提示框水平居中，可根据需求调整位置 */
  left: 50%;
  transform: translateX(-50%);
  background: #f0f0f0;
  padding: 8px 16px;
  border-radius: 4px;
}
/* 给提示框的父元素添加相对定位，避免提示框相对于整个页面定位 */
.msg-parent {
  position: relative;
  padding-top: 30px; /* 避免提示框挡住父容器内的其他内容 */
}

然后把提示div放到这个父容器里：

<div class="msg-parent">
  <div class="text-center mb-3 msg" id="copy-msg"></div>
  <!-- 其他元素 -->
</div>

JS代码保持原来的即可，插入消息时提示框会悬浮在页面上，不会挤压下方元素。

方案2：提前给div预留固定高度 #

通过CSS给提示div设置固定高度，默认隐藏内容，显示时只让内容可见，这样div一直占着固定空间，不会撑开高度挤压其他元素。

CSS：

.msg {
  height: 24px; /* 对应消息显示时的高度，可自行调整 */
  visibility: hidden;
}
/* 显示消息时添加这个类 */
.msg.show {
  visibility: visible;
}

修改JS代码，通过类名控制显示：

const copyMsg = document.getElementById("copy-msg");
copyMsg.innerHTML = "Copied!";
copyMsg.classList.add("show");
// 可选：2秒后自动隐藏消息
setTimeout(() => {
  copyMsg.classList.remove("show");
  copyMsg.innerHTML = "";
}, 2000);

方案3：用透明度实现过渡显示（带动画效果） #

和方案2类似，但用opacity代替visibility，可以添加过渡动画，让显示隐藏更平滑：

CSS：

.msg {
  height: 24px;
  opacity: 0;
  pointer-events: none; /* 隐藏时不响应鼠标事件 */
  transition: opacity 0.3s ease;
}
.msg.show {
  opacity: 1;
  pointer-events: auto;
}

JS代码和方案2完全一样，消息显示时会有淡入效果，同样不会挤压其他元素。

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