弹窗通知面板无法固定在触发按钮右侧的问题求助

架构老林

2026-9-27

问题根因

布局逻辑错误：通过固定值margin-left: 550px控制通知按钮的位置，没有让导航栏右侧区域自然靠右，窗口宽度变化时按钮本身位置会发生偏移
弹窗定位逻辑错误：给.notification_dd设置right: -150px固定偏移值，父容器位置变动时弹窗会跟着偏移
无效/错误代码：max-width: -20px属于非法属性值完全不生效；1200px断点的媒体查询里类名拼写错误（myNotificatio少了末尾的n），规则完全不生效

修复方案

修正导航栏布局，让右侧区域自然靠右，删除固定margin值
给导航栏新增布局规则：

.myNavbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 可根据实际需求加内边距，比如 padding: 0 20px; */
}

删除.myNavbar .navbar_right .myNotification中的margin-left: 550px，以及拼写错误的1200px断点媒体查询规则。

修正弹窗定位规则，让其始终对齐通知按钮右侧正下方：

.myNavbar .profile_dd,
.notification_dd{
  /* 删除原有 right: -150px、max-width: -20px 规则 */
  right: 0; /* 和父容器（通知按钮外层）右侧完全对齐 */
  top: 100%; /* 正好展示在按钮正下方 */
  background-color: red;
  padding: 2em;
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
  z-index: 999; /* 可选，避免弹窗被其他元素遮挡 */
}