Flask HTML模板中Semantic UI提示框与按钮重叠问题求助

针对你的PoC项目，这里有几个快速解决提示框与按钮重叠的办法，都是轻量无需复杂修改的：

1. 利用相对+绝对定位错开位置 #

给按钮设置相对定位，提示框绝对定位到按钮的上方/下方，彻底避开按钮区域：

/* 按钮样式 */
.copy-btn {
  position: relative; /* 作为提示框的定位容器 */
}

/* 提示框样式 */
.copy-toast {
  position: absolute;
  top: -45px; /* 向上偏移，避开按钮 */
  left: 0;
  width: 100%;
  z-index: 10; /* 确保提示框在按钮上方显示 */
  margin: 0; /* 去掉默认间距避免影响定位 */
}

如果想放在按钮下方，把top: -45px改成bottom: -45px即可。

2. 添加间距快速分离 #

直接给提示框加外边距，利用Semantic UI的间距类或者自定义CSS，快速拉开和按钮的距离：

<!-- 按钮 -->
<button class="ui button copy-btn">Copy to Clipboard</button>
<!-- 提示框加margin类 -->
<div class="ui message copy-toast hidden mt-2">Copied!</div>

如果Semantic UI没有自带的mt-2类，直接写内联样式：

<div class="ui message copy-toast hidden" style="margin-top: 8px;">Copied!</div>

3. 动态定位到按钮侧边 #

用JS获取按钮的位置，把提示框放到按钮右侧，适合横向布局：

document.querySelector('.copy-btn').addEventListener('click', function() {
  // 复制逻辑...
  
  const toast = document.querySelector('.copy-toast');
  const btnRect = this.getBoundingClientRect();
  
  // 设置提示框位置在按钮右侧10px处，垂直居中
  toast.style.left = `${btnRect.right + 10}px`;
  toast.style.top = `${btnRect.top + (btnRect.height - toast.offsetHeight)/2}px`;
  
  // 显示提示框并触发淡入淡出
  toast.classList.remove('hidden');
  setTimeout(() => toast.classList.add('hidden'), 2000);
});

优先推荐第一种或第二种方案，代码改动最小，完全适配PoC项目的快速需求。

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