自定义autocomplete下拉菜单无法溢出父div显示，该如何解决？

问题根源 #

你的问题核心是包含下拉菜单的祖先元素设置了溢出裁剪规则，导致绝对定位的下拉列表被截断：

1. .contenuFormulaireOverlay 设置了 overflow: hidden，会强制裁剪所有超出容器边界的子元素
2. 它的直接子div设置了 overflow-y: auto; overflow-x: hidden，进一步限制了子元素的溢出展示
3. 层级失效是因为 autocomplete-items 处于父容器的层叠上下文中，单独调整它的z-index无法突破父容器的层级限制

解决方案 #

方案1：纯CSS修改（适合浮层内容无需滚动的场景）

如果你的浮层内容较少，不需要纵向滚动，可以直接修改以下CSS：

/* 移除浮层容器的溢出裁剪 */
.contenuFormulaireOverlay {
  overflow: visible; /* 替换原来的overflow: hidden */
}
/* 修改浮层内容容器的溢出规则 */
.contenuFormulaireOverlay > div {
  overflow: visible; /* 替换原来的overflow-y: auto; overflow-x: hidden; */
}
/* 给下拉列表加最大高度和内部滚动，同时调高z-index */
.autocomplete-items {
  max-height: 240px; /* 可根据需求调整最大高度 */
  overflow-y: auto;
  z-index: 202; /* 高于浮层的201层级，确保在最上层 */
}

方案2：fixed定位改造（兼容浮层需要滚动的场景，通用度更高）

如果浮层内容较多需要保留纵向滚动功能，就把下拉列表改成fixed定位，完全脱离父容器的溢出限制，添加少量JS动态计算位置即可：
第一步修改CSS：

.autocomplete-items {
  position: fixed; /* 替换原来的absolute */
  max-height: 240px;
  overflow-y: auto;
  z-index: 9999; /* 直接设最高层级，确保在所有元素之上 */
}

第二步添加JS逻辑：

const autocompleteInput = document.querySelector('.autocomplete input');
const autocompleteList = document.querySelector('.autocomplete-items');

function updateAutocompletePosition() {
  const rect = autocompleteInput.getBoundingClientRect();
  autocompleteList.style.width = `${rect.width}px`;
  autocompleteList.style.top = `${rect.bottom}px`;
  autocompleteList.style.left = `${rect.left}px`;
}

// 输入框聚焦时更新位置
autocompleteInput.addEventListener('focus', updateAutocompletePosition);
// 浮层滚动、窗口尺寸变化时更新位置
document.querySelector('.contenuFormulaireOverlay > div').addEventListener('scroll', updateAutocompletePosition);
window.addEventListener('resize', updateAutocompletePosition);

两种方案均可以满足你的全部需求：

• 下拉菜单宽度与输入框宽度完全一致
• 选项数量超过最大高度时，下拉列表内部出现滚动条
• 下拉列表可溢出父div，悬浮在所有元素最上层

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