Angular 16+Ng-Zorro下拉菜单上移覆盖按钮问题求助

一、强制下拉菜单始终显示在按钮下方 #

Ng-Zorro的下拉菜单默认会根据屏幕空间自动调整位置，要实现始终显示在按钮下方、仅水平适配屏幕边界，需要通过配置底层Popper.js的参数禁用自动上移逻辑：

1. 在组件TS中添加Popper配置 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-en-open-jobs',
  templateUrl: './en-open-jobs.component.html',
  styleUrls: ['./en-open-jobs.component.css']
})
export class EnOpenJobsComponent {
  // 新增下拉菜单Overlay配置
  dropdownOverlayOptions = {
    placement: 'bottom',
    modifiers: [
      {
        name: 'flip',
        enabled: false, // 禁用自动翻转位置（禁止上移）
      },
      {
        name: 'preventOverflow',
        options: {
          mainAxis: false, // 禁用Y轴方向的溢出调整
          altAxis: true, // 保留X轴方向的溢出调整（自动适配左右屏幕边界）
        },
      },
    ],
  };

  // 原有代码不变
  dropdowns = [...];
  activeDropdownIndex: number | null = null;
  toggleDropdown(index: number) { ... }
}

2. 在HTML中绑定配置并设置菜单滚动 #

修改下拉触发元素的绑定，添加nzOverlayOptions，同时给菜单设置最大高度实现滚动：

<a nz-dropdown
   [nzDropdownMenu]="menu"
   [nzOverlayClassName]="'custom-dropdown-menu'"
   [nzOverlayOptions]="dropdownOverlayOptions" <!-- 绑定配置 -->
   class="font-Syne font-normal text-brainport-blue text-xl relative active:text-brainport-blue"
   [nzTrigger]="'click'"
   [nzClickHide]="false"
   [ngClass]="{'underline-offset-custom': activeDropdownIndex === i}"
   (click)="toggleDropdown(i)">{{dropdown.label}}</a>

更新CSS菜单样式，添加滚动：

::ng-deep .ant-dropdown-menu{
  padding: 0.75rem 1rem;
  border-radius:10px;
  background-color: #D2D2E5;
  max-height: 400px; /* 自定义最大高度 */
  overflow-y: auto; /* 内容超出时滚动 */
}

.custom-dropdown-menu {
  z-index: 20 !important; /* 确保菜单层级正确 */
}

二、实现按钮下方及菜单后方区域的模糊效果 #

通过添加遮罩层实现背景模糊，仅在下拉菜单激活时显示：

1. 在HTML中添加模糊遮罩层 #

将遮罩层放在下拉菜单容器的父级中，利用activeDropdownIndex控制显示：

<div class="mr-5 ml-5 mb-14 relative mt-6 ">
  <!-- 新增模糊遮罩层 -->
  <div 
    class="absolute inset-0 bg-black/20 backdrop-blur-md z-10 pointer-events-none transition-opacity duration-300"
    [class.opacity-0]="activeDropdownIndex === null"
    [class.opacity-100]="activeDropdownIndex !== null"
  ></div>

  <!-- 原有内容：将下拉容器设置为相对层级，确保在遮罩上方 -->
  <app-search-bar></app-search-bar>
  <div class="flex flex-row gap-8 overflow-y-auto whitespace-nowrap z-20 relative">
    <ng-container *ngFor="let dropdown of dropdowns; let i = index">
      <!-- 下拉触发元素和菜单 -->
    </ng-container>
  </div>
  <app-title-paragraph ...></app-title-paragraph>
</div>

2. 修复复选框ID重复问题（额外优化） #

当前循环中所有复选框ID均为checkbox1，会导致点击冲突，修改为动态ID：

<li *ngFor="let item of dropdown.items; let j = index">
  <label [for]="'checkbox-' + i + '-' + j" class="cursor-pointer relative flex flex-row gap-2 items-center">
    <input [id]="'checkbox-' + i + '-' + j" type="checkbox" class=" relative appearance-none h-6 w-6 border-brainport-blue border-2 rounded-sm checked:border-none">
    <img src="assets/Images/CheckboxChecked.svg" class="absolute top-0 left-0 opacity-0 check-1 h-6 w-6 ">
    <p class="text-sm text-brainport-blue font-Inter font-light m-0"> {{item.name}}</p>
  </label>
</li>

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