父容器设置overflow:scroll时，如何让子DOM元素的溢出内容可见？

父容器设置overflow: scroll时，默认无法让内部absolute定位的datepicker弹出层溢出父容器正常显示：只要父元素设置了非static的定位属性（relative/absolute/fixed等），absolute定位的子元素的包含块就是当前父容器，父容器的overflow: scroll会直接裁剪所有超出边界的内容，和子元素的z-index层级无关，这也是你之前设置position: absolute无效的核心原因。

• 使用Portal传送门（最推荐）
  这是所有组件库处理弹层裁剪问题的标准方案：将datepicker的弹出层DOM直接渲染到不受overflow: scroll约束的上层节点（比如document.body或者modal的根容器节点），仅通过JS动态计算输入框的视口坐标，将弹出层定位到输入框对应位置即可。
  主流组件库基本都内置了该配置项，比如Ant Design的DatePicker可以配置getPopupContainer={() => document.body}，Element Plus的DatePicker可以配置teleported属性实现该效果。

• 拆分DOM结构
  如果无法使用传送门能力，可以将datepicker的输入框和弹出层拆分为两个独立的DOM节点：输入框放在滚动容器内负责交互和输入，弹出层放在modal的根节点（modal一般只有内容区会设置overflow: scroll，根节点不会做滚动裁剪）下，通过JS监听滚动容器的滚动事件、输入框的位置变化，同步更新弹出层的定位坐标即可。

• 预留容器空间（仅适用固定场景）
  如果你的modal滚动容器高度足够固定，可以给滚动容器底部增加足够的内边距，给datepicker弹出层预留出完全显示的空间，避免弹出层超出滚动容器边界，该方案适配性较差，仅适合固定尺寸的modal场景使用。

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