如何用CSS制作消息通知提示框？-css教程-PHP中文网

消息通知提示框应采用position: fixed实现全局居中，设置z-index≥1000、max-width:360px及opacity+transform动画，并在transitionend后移除dom；多条通知需动态计算top值或使用容器堆叠；移动端需适配宽度、点击区域等细节。

如何用css制作消息通知提示框？

消息通知提示框的核心是「出现时不影响布局流、有明确关闭机制、视觉上能被用户感知」，用 position: fixed 或 position: absolute 配合 CSS 动画是最直接有效的方案。

用 `position: fixed` 实现全局居中提示

这是最常用的方式，适用于全站级提示（如登录成功、操作完成）。关键点在于脱离文档流、避免遮挡主内容、支持多条叠加。

必须设置 z-index，推荐值 ≥ 1000，否则可能被弹窗、导航栏盖住
用 top: 20px + left: 50% + transform: translateX(-50%) 实现水平居中，比 margin: auto 更可靠
宽度建议设为 max-width: 360px，过宽在小屏上会溢出；用 width: fit-content 或 inline-block 容器可自适应文字长度
动画推荐用 opacity + transform: translateY 组合，避免触发布局重排

.notify {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1001;
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: opacity 0.2s, transform 0.2s;
}

.notify.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

点击关闭按钮后自动移除 DOM 节点

仅靠 CSS 隐藏（display: none）会导致残留节点堆积，尤其频繁触发时。真正干净的做法是 JS 在过渡结束后移除元素。

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

监听 transitionend 事件，检查 propertyName === 'opacity'，避免因 transform 触发多次回调
关闭按钮的 click 处理中先加 show 的反向类（如 hide），再等动画结束再 remove()
不要用 setTimeout 模拟动画时长，不同设备或 CSS 变更容易失步

多条通知堆叠时避免位置重叠

固定定位下，新通知默认会覆盖旧通知。要实现“从上到下依次排列”，得用 JS 动态计算 top 值或改用 position: absolute + 父容器 position: relative。

推荐方案：把所有通知挂在一个 div#notify-container 下，容器设 position: fixed; top: 20px; right: 20px;，通知项用 position: relative + margin-top: 8px 堆叠
如果坚持用 fixed 单个定位，需 JS 计算已有通知高度总和，动态设置新通知的 top 值（注意包含 margin 和 gap）
切忌用 top: 0 + flex-direction: column-reverse，会导致新通知出现在最下方，不符合阅读预期