下拉列表被父容器 overflow 裁剪需将 .dropdown 移至 body 下动态定位，或改用 inline-block 父级；遮挡按钮因设了死高度，应移至子容器并保持 .dropdown 在文档流；原生 select 弹出层不可控，须换自定义组件；iOS Safari 和 IE11 需用 requestAnimationFrame 和换行符归一化修复高度计算。
下拉列表被父容器 overflow 裁剪怎么办
根本原因是 .dropdown 的定位上下文被包裹在 overflow: hidden、auto 或 scroll 的祖先元素里，浏览器会强制裁剪超出部分。这不是 z-index 或背景色能解决的。
检查方法：用开发者工具高亮盒子模型，看下拉区域是否被红色虚线（clipping boundary）切掉；临时给疑似祖先加 outline: 2px solid red 快速定位。
- 把
.dropdown的直接父级（通常是position: relative元素）从溢出容器中移出，挂到<body>下，再用getBoundingClientRect()动态计算位置 - 若必须保留在原 DOM 位置，可将该父级设为
display: inline-block，它仍能提供定位上下文，又不触发祖先的裁剪逻辑 - 更稳妥的替代方案：用
position: fixed+top/left手动定位，并监听scroll和resize事件重算坐标
下拉内容撑开后遮挡下方按钮怎么破
典型表现是展开后盖住 #confirmarBtn 或提交区——这说明你给下拉容器写了死高度（如 height: 300px），而没让它随内容自然流动。
关键原则：下拉容器本身（如 .dropdown）**不能设 height、min-height 或 max-height**，否则它就脱离文档流撑高逻辑，变成“浮层”，必然遮挡。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 把
max-height和overflow-y: auto放在子容器上，比如.dropdown > ul或.dropdown-menu - 确保
.dropdown是position: relative或默认static，保持它在文档流中；一旦用absolute或fixed，高度变化就不会推挤下方元素 - 动态更新
li后，先执行dropdownUl.style.height = 'auto'清掉旧内联样式，再读scrollHeight设置新高度
原生 <select> 下拉面板遮挡其他元素能调吗
不能。原生 <select> 的弹出层由操作系统或浏览器底层控件渲染（Windows 上是 ComboBox，macOS 是 NSPopUpButton，iOS 是全屏 modal），CSS 完全不可穿透。
你在 <select> 上设 z-index、max-height 或 background，只影响顶部选中区，对弹出菜单无效。所谓“遮挡”，其实是系统控件自己的层级行为，前端无权干预。
- 唯一可控的是
size属性：设size="4"可固定显示 4 行选项并自带滚动，但它会变成列表框（非弹出式），视觉风格突变 - 轻量折中：用
<div class="select-wrapper">包住<select>，给 wrapper 设max-height: 200px和overflow-y: auto，仅当size > 1时生效 - 真正要统一高度、防遮挡、支持键盘导航和无障碍，必须换自定义组件（
div+ul+li），并同步<select>的 value 值作降级
iOS Safari 和 IE11 高度计算不准的坑
这两个环境对 scrollHeight 更新特别敏感，不处理就会出现“删完文字高度不缩”“粘贴后底部留白”“光标跳动”等现象。
它们不是 bug，而是实现差异：iOS Safari 有微小延迟，IE11 把 \r\n 当一个字符算，导致 scrollHeight 偏小约 2px。
- iOS Safari：内容变更后，用
requestAnimationFrame包一层再读scrollHeight，setTimeout(..., 0)不够稳 - IE11：做换行符归一化，例如
textarea.value = textarea.value.replace(/\r\n/g, '\n') - 所有场景都必须配 CSS 的
min-height和max-height——JS 只管“当前要多高”，上下限得靠样式兜底 - 别忘了
box-sizing: border-box，否则padding和border会让计算值和视觉脱节
